前言：在阅读此文章前请先确保电脑已安装node，且npm功能正常，此文适合cli2.x以上版本创建项目，例cli3.x或者cli4.x
1、安装cli
1.1、 Vue-cli 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x)，你需要先打开cmd命令行窗口通过以下命令卸载旧版
npm uninstall vue-cli -g
// or 或者
//安装了yarn的小伙伴也可以用 yarn global remove vue-cli 进行卸载
yarn global remove vue-cli
1.2、 vue-cli 新版安装
如果你是从node中文官网http://www.nodejs.com.cn/安装的10.14.2长期支持版 建议安装cli时选择不大于@4.5.13版本，不要刻意去升级node，否则npm随node版本升高对于老项目的npm支持性不友好，下载公司项目依赖的时候会因npm版本不对应问题各种报错
npm install -g @vue/cli
// or 或者
yarn global add @vue/cli
注意：node版本<=10.14.2的请执行以下命令安装指定版本cli
npm install -g @vue/cli@4.5.13
// or 或者
yarn global add @vue/cli@4.5.13
否则直接执行第二步创建项目命令会有以下报错
image.png
2、创建项目
2.1、vue create 你的项目名 （创建项目时，如需在指定目录下创建请先cd进对应目录，例如我想在D盘zheheWeb下创建就可以cd /D D:/zheheWeb）
vue create my-project
//or 或者
vue ui
2.2、 这里我们vue create "项目名" 后，选择手动创建Manually select features（手动创建更灵活，可以自主选择要或不要安装某些依赖），cli3.x和4.x本质上没有太大区别，都有默认和手动选择
Vue CLI v4.5.13
? Please pick a preset: (Use arrow keys) //请选择一个预设（使用方向键）
Default ([Vue 2] babel, eslint) //默认Vue2，并安装babel，eslint
Default (Vue 3) ([Vue 3] babel, eslint) //默认Vue3，并安装babel，eslint
> Manually select features //手动选择功能
2.3、配置项勾选，空格键选中和非选中，a 全选，i 反选，下面是我选的配置项 选完按回车键Enter确定进入下一步
(*) Choose Vue version //选择vue版本
(*) Babel //Babel-Es6语法转换
( ) TypeScript //Ts，js超集
( ) Progressive Web App (PWA) Support //PWA渐进式Web应用程序。
(*) Router //Router vue-router 。
(*) Vuex //Vuex vuex 。
(*) CSS Pre-processors //CSS 预处理器。
>(*) Linter / Formatter //代码风格检查和格式化
( ) Unit Testing //单元测试（unit tests）
( ) E2E Testing //E2E 测试
2.4、选择一个Vue.js版本，你想用它开始项目(使用方向键) 这里我选择 2.x版本按Enter进入下一步
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
3.x
2.5、路由器使用 history 模式?(需要适当的服务器设置以便在生产中实现索引回退)(Y/n) Y是 n否，输入Y按Enter进入下一步
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) Y
2.6、选择一个CSS预处理器(默认支持PostCSS, Autoprefixer和CSS模块):(使用方向键) 如下所示选择Sass/SCSS (with dart-sass) 按Enter进入下一步
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
Stylus
2.7、选择linter / formatter配置:(使用方向键) 如下所示选择SLint with error prevention only 按Enter进入下一步
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
2.8、选择额外的lint功能:(按<空格>选择，<a>切换全部，<i>反转选择) 如下所示选择Lint on save 按Enter进入下一步
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
( ) Lint and fix on commit
2.9、你喜欢把配置Babel, ESLint等放在哪里? 如下所示选择In package.json 按Enter进入下一步
? Where do you prefer placing config for Babel, ESLint, etc.?
In dedicated config files
> In package.json
last、将此保存为未来项目的预设?(y / N)y是 N否 （输入y后会记住当前选择配置模板，以后生成新项目都按此配置） 输入N 按Enter进入下一步开始创建项目
? Save this as a preset for future projects? (y/N) N
最后选完如下图所示
image.png
等待下载完依赖后如图所示就代表项目创建成功了
image.png
3、项目创建完成 cd my-project 进入项目目录 运行npm run serve命令 出现以下页面至此大功告成
image.png
网友评论