vue-cli4搭建项目

使用Vue-Cli 4.x脚手架项目初步搭建

1. 前提：

node的版本要在8.11.0+，并配置好node 的环境变量

2. 如果之前电脑中安装多其他版本的脚手架需要卸载掉其他的版本， 重新安装4.x版本

**npm uninstall -g vue-cli**

3. 安装最新版本脚手架

npm install -g @vue/cli
# OR
yarn global add @vue/cli

安装后查看脚手架的版本

**vue --version**  或  vue -V

注意： 如果在使用命令行时出现

vue 不是内部或外部命令

需要在C盘根目录下搜索

vue.cmd

然后找到node_global文件的vue.cmd; 讲文件路径添加到系统的环境变量path中

再运行刚才的命令就可以了

4. 生成vue项目

在cmd中进入想要存放代码的路径然后输入命令

 vue create 项目名

注意： 项目名要小写

项目名不能出现大写字母

选择 Manually select features 自定义配置
按空格键选中和反选

1. Babel (必选) 是一个 JavaScript 编译器， Babel 是一个工具链，主要用于将 ECMAScript 2015+ 版本的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。
2. TypeScript（项目中使用ts开发的话，可以勾选）
3. Progressive Web App (PWA) Support (接口缓存，优化项目) Progressive Web App其实严格说来不是一个产品，而是一种理念，或者叫打包产品，因为他是把众多能让WEB产品APP化的能力的一个集合。三个特性： 类APP交互，消息推送，离线缓存
4. Router 选择是否使用路由 history router，其实直白来说就是是否路径带 # 号，建议选择，否则服务器还要进行配置
5. Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。（如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。）引用 Redux 的作者 Dan Abramov 的话说就是：Flux 架构就像眼镜：您自会知道什么时候需要它。
6. CSS Pre-processors (css预处理器，需要) CSS预处理器是一种专门的编程语言，用来为CSS增加一些编程特性（CSS本身不是编程语言）。不需要考虑浏览器兼容问题，因为CSS预处理器最终编译和输出的仍是标准的CSS样式。可以在CSS预处理器中：使用变量、简单逻辑判断、函数等基本编程技巧。
7. Linter / Formatter (代码格式，一般默认选中)
8. Unit Testing (代码测试)
9. E2E Testing（需求界面测试）
   然后回车
   
10. 选择scss预编译语言（部分特性： 继承，嵌套， 变量， mixin， 函数功能， 引用父元素& 等）
    dart-sass 和 node-sass的区别
    sass 官方目前主力推dart-sass 最新的特性都会在这个上面先实现
    node-sass是自动编译实时的，dart-sass需要保存后才会生效
11. 选择 ESLint 代码校验规则，提供一个插件化的javascript代码检测工具，ESLint + Prettier 使用较多
    
    12. 然后选择什么时候进行代码校验，Lint on save 保存就检查，Lint and fix on commit fix 或者 commit 的时候检查，建议第一个
    
    13. 选择单元测试， 我选的是Jest
    
    14. 选择存放babel,postcss,eslint这些配置文件
    
    15. 最后就是是否保存本次的配置了，N 不记录，如果选择 Y 需要输入保存名字
    .
    16. 然后开始vue的自动生成
    
12. 生成成功界面
13. vue的简单架子目录结构
14. 在浏览器里输入运行结束后的提示地址