vue3.0基础1

52 阅读1分钟

这是我参与「掘金日新计划 · 8 月更文挑战」的第1天,点击查看活动详情

vue3和vue2的运行环境差不多,都可以直接外部引用和vue脚手架。

我们工作的过程当中使用vue脚手架的时候比较多,我们就用vue脚手架的方式了。

首先我们需要下载最新版node,去官网 nodejs.org/zh-cn/ 下载长期维护版本的比较稳定

然后大家可以先替换一下npm的下载的源
分别有 npm --registry 源的访问地址 这是临时更改 npm config set registry 源的访问地址(永久更改)(npm config set registry registry.npm.taobao.org\)更换淘宝源

npm config get registry 这个可以查看是否添加成功

然后需要现在vue脚手架 npm install -g vue vue/cli 全局安装

使用vue -V查看版本 如果可以查询到就说明安装ok了

使用 vue create 项目名称(如:demo1) 新建项目

geng1.png 第一个是vue2 的默认模版 第两个vue3的默认模版 第三个是自定义下载 初学者 可以用第三个自定义版本 把eslint 代码校验去掉 对初学者不友好

自定义版本的选择(使用空格选择) 回车是直接确定的 进入了下一步

geng2.png

进入到下一步 选择3.x

geng3.png

下一步

geng4.png

选择完,脚手架会直接创建项目了,

创建完使用npm run serve 跑起来就ok了

下面是文件结构简单示意

geng6.jpg

还有几个图里没写我在这个补充

  • babel.config.js 配置babel的 转移语法 一般我们不需要改动
  • package-lock.json 我们依赖包的具体信息
  • package.json 包管文件
  • 项目介绍mackdown 格式的

今天先介绍到这里 下次继续