vue-cli3搭建项目之项目初始化配置

Vue-cli3搭建完整项目之项目初始化配置

​ 最近发现vue-cli的版本更新到3+了，本着学习的态度开始研究了一下它，发现里面变化太大了，比如原先的暴露出来的webpack的配置你会发现在3里面根本找不到，下面就开始搭建一个完整的项目。

vue-cli3官网

一、升级或下载vue-cli3

npm install -g @vue/cli

二、创建项目

1. 创建项目

vue create 你的项目名称

注意：原先的vue init 指令已经不适用了，如果想继续使用可以安装@vue/cli-init

npm install -g @vue/cli-init
vue init webpack 你的项目名称

2. 项目配置
   

3. default: 默认配置，只有bable和eslint

4. Manually select features: 手动配置

   我选的是手动配置，以下是我的配置：

   • Babel：将ES6编译成ES5
   • TypeScript：JS超集，主要是类型检查
   • Progressive Web App（PWA）Support：渐进式WEB应用支持
   • Router：路由
   • Vuex：状态管理
   • Linter/ Formatter：代码检查工具
   • CSS Pre-processors：css预编译 (稍后会对这里进行配置)
   • Unit Testing：单元测试，开发过程中前端对代码进行自运行测试
   • E2E Testing: 端对端测试，属于黑盒测试，通过编写测试用例，自动化模拟用户操作，确保组件间通信正常，程序流数据传递如预期。

   路由使用历史模式? 这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面

   Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y
   

   使用什么css预编译器？ 我选择的less(由于我项目中配了一个vux,它是基于lessd的)

   代码检查工具选择：

   • tslint: typescript格式验证工具（如果前面选择了TypeScript会有这一项）
   • eslint w...: 只进行报错提醒；（如果还没熟悉eslint,推荐使用此模式）
   • eslint + A...: 不严谨模式；
   • eslint + S...: 正常模式
   • eslint + P...: 严格模式；

   代码检查方式：我是都选了

5. List item

   所有的依赖目录的配置放置的位置（一般都是package.json）

   是否在以后的项目中使用以上配置？(我选的是no,如果选是的话，下一次初始化项目时，会多出一条你上一次的配置)

   Save this as a preset for future projects? (y/N) n
   

   下载依赖的工具：使用 yarn，速度快。（也可以使用npm,看个人习惯）

到此为止，安装就完成了，可以等待安装成功。

注：也可以使用vue ui指令进行可视化界面创建项目，与上面的指令式的没多少差别，只是将我们要做的那些操作变成网页选项的形式，个人感觉还是挺不错，推荐使用(里面加了很多人性化的小功能)

这就是创建好后的项目目录结构