vue cli 4创建项目过程详解

首先先确认自己电脑中nodejs的版本 官方要求 Vue CLI 4.0以上版本是要node.js v8.9以上版本(官方推荐v10以上版本)

使用node -v查看node.js版本号

node -v  // 查看nodejs版本号

接下来下载Vue CLI至全局

npm install -g @vue/cli

查看当前版本

vue --version

接下来就可以去创建项目了 

使用 vue create xxx 创建项目(xxx是项目名称)我这里创建的项目名就叫cli

接下来会出现配置选择 default是默认选项 由于我电脑中之前安装过2.9.6的版本 所以也会出现Vue2的选项 这里建议选择第三个手动进行配置

vue cli 4创建项目过程详解_第1张图片

手动配置项如下 使用↑↓进行光标移动 空格进行选择 a是全选 会选择全部选项 b是反选 一些选项在图里标注了 

这里建议选择上 router、 vuex、 cssPre-processors  (基本不会有项目不用这几个吧 这时候不下过后也得下)

vue cli 4创建项目过程详解_第2张图片

接下来会选择是否使用history路由模式 这个就看项目或者个人需求了 我是选择的no

vue cli 4创建项目过程详解_第3张图片

这张图在选择路由是否使用history的上面还询问了我使用 cli的版本 (之前我安装过2.9.6 所以询问过)如果没有cli2版本的应该是不会出现这个选项的

接下来选择项目中要使用的css预处理器 这个也是看项目或者个人需求 我选择的是 node-sass 

vue cli 4创建项目过程详解_第4张图片

接下来会询问如何存放配置 我这里选择的就是最常用的package.json

再下一步会询问是否保存这次的配置 如果选择是的话 可以起个名字保存选择的选项 下次再创建的时候 可以直接选择你这次配置的选项去创建项目了

保存后会在第一步 (Please pick a preset )这里出现我们保存的配置项 需要的话选择就行了

vue cli 4创建项目过程详解_第5张图片

都选择之后就开始创建项目了 最后创建成功是这个样子的

vue cli 4创建项目过程详解_第6张图片

最后两个蓝色的两个指令直接就告诉怎么运行项目了 

cd cli(cli是我创建的项目文件夹)进入该项目

npm run serve 运行即可

你可能感兴趣的:(前端,vue-cli3)