Vue CLI4.0最新版安装教程

关于旧版本

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
注意点:Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。

1.你可以使用下列任一命令安装这个新的包:
npm install -g @vue/cli
或者
yarn global add @vue/cli
二者选一

2.你还可以用这个命令来检查是否安装成功及其安装版本:
vue --version

3.创建项目
vue create 项目名称

4.选择
在这里插入图片描述

然后你会被提示选取一个 preset。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset,也可以选“手动选择特性”来选取需要的特性。
这个默认的设置非常适合快速创建一个新项目的原型,而手动设置则提供了更多的选项
在这里插入图片描述

5.若选择手动请继续以下操作
选择预设配置为router、vuex、babel、eslint
注意,上下方向键时控制上下移动的,空格键是选择对应项的
然后回车,继续执行

在这里插入图片描述

6.是否使用路由的history模式,看个人及项目
在这里插入图片描述

hash —— 即地址栏 URL 中的 # 符号
比如这个 URL:http://www.abc.com/#/hello,hash 的值为 #/hello。它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。

扫描二维码关注公众号,回复: 13026117 查看本文章

history模式需要后端配合使用

7.选择一个预处理语言
发现scss是element-admin框架的依赖css预处理语言,就选择sass吧,选择node-sass
在这里插入图片描述

8.语法检测工具
分别为,只预防、airbnb配置、标注配置、最高配置
在这里插入图片描述

9.选择代码检测的时机
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200716111006458.png

10.更新换将单独配置的文件放到pakage.json还是放在单独的文件
在这里插入图片描述

11.是否把以上设置过的预设配置保存起来
在这里插入图片描述

这里不需要,每次创建项目重新选择一遍不麻烦,很快就选择好了,输入n

回车,就开始创建项目了,耐心等待,安装依赖
在这里插入图片描述

cd 你开始设置的项目名
然后启动项目即可完成

12.使用图形化界面
你也可以通过 vue ui 命令以图形化界面创建和管理项目:
上述命令会打开一个浏览器窗口,并以图形化界面将你引导至项目创建的流程。
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_44517301/article/details/113800829
今日推荐