创建的项目依赖： vue add 是什么方法？

1、vue add可能会改变现有的项目结构，但是npm install仅仅是安装包而不会改变项目的结构

2、add如果你下载的库, 特别是 Ui 库, 希望对脚手架结构产生影响,
那就选择
vue add xxx

3、npm如果不希望对脚手架结构产生影响, 只是单纯的使用, 比如 axios 这个插件
那就选择
npm install xxx

Vue创建一个新的项目

卸载1.x和2.x

1、npm uninstall vue-cli -g    

全局安装

2、npm install -g @vue/cli

创建项目：

1、vue create 项目名

2、	(1. default (babel, eslint) 默认预设配置 babel, eslint
 	(2. Manually select features  手动选择配置

3. enter后，进入手动选择配置 ,有以下Installed CLI Plugins选项(注：空格单选，a全选，i反向全选)

(1. babel
(2. TypeScript  
(3. Progressive Web App (PWA) Support  支持渐进式网页应用程序
(4. Router 路由管理器
(5. Vuex 状态管理模式（构建一个中大型单页应用时）
(6. CSS Pre-processors css预处理
(7. Linter / Formatter 代码风格、格式校验
(8. Unit Testing 单元测试
(9. E2E Testing E2E（End To End）即端对端测试

4、typescripts

是否使用class风格的组件语法：Use class-style component syntax?
是否使用babel做转义：Use Babel alongside TypeScript for auto-detected polyfills?

5、Router 路由管理器

路由使用历史模式:Use history mode for router? (Requires proper server setup for index fallback in production) 

6、 CSS Pre-processors css预处理

选择CSS 预处理类型:Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)  
选项：
	Less
	Sass
	Stylus

7、Linter / Formatter 代码风格、格式校验

选择Linter / Formatter类型:Pick a linter / formatter config:
选项：
	TSLint
	ESLint with error prevention only  仅错误预防
	ESLint + Airbnb config  Airbnb配置
	ESLint + Standard config 标准配置
	ESLint + Prettier
	选择lint方式：Pick additional lint features
	选项：
	Lint on save 保存时检查
    Lint and fix on commit 提交时检查

7、选择语法检查方式，这里我选择保存就检测

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Lint on save // 保存就检测
 ( ) Lint and fix on commit // fix和commit时候检查

8、Unit Testing 单元测试

选择unit testing类型：Pick a unit testing solution: (Use arrow keys)
选项：
	Mocha + Chai  
    Jest 

9、E2E Testing E2E（End To End）即端对端测试

 Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
 选项：
	In dedicated config files 在专用的配置文件中
    In package.json 在package.json

10、将此作为将来项目的预置吗？

Save this as a preset for future projects?
 选项：
	In dedicated config files 在专用的配置文件中
    In package.json 在package.json

11、保存预设为

Save preset as:
10.键入N不记录，如果键入Y需要输入保存名字，如第一步所看到的我保存的名字为xs-default

最后cd进去然后运行项目

（可以直接跳过）

Vue CLI 插件的名字以 @vue/cli-plugin- (内建插件) 或 vue-cli-plugin-(社区插件) 开头

dependencies: {   //运行依赖，运行着也需要
    1、"core-js":
     core-js 是babel-polyfill 的底层依赖，通过各种奇技淫巧，
     babel-polyfill（被称作就是ie9和一些低版本的高级浏览器对es6新语法并不支持）
     比如有个错误vuex requires a Promise polyfill in this browser.
     用 ES3 实现了大部分的 ES2017 原生标准库，同时还要严格遵循规范。
     core-js@2出现的问题core-js@3解决
    2、"vue": 
    现在还是2.x版本
    3、"vue-class-component": 
    vue-class-component 是尤大大推出的vue对typescript支持的装饰器(库)
    vue-class-component强调了几点用法：
	1、methods可以直接声明为类成员方法
	2、computed属性可以声明为类属性访问器
	3、data数据可以声明为类属性
	4、data render 和所有Vue生命周期挂钩也可以直接声明为类成员方法，但不能在实例本身上调用它们。在声明自定义方法时，应避免使用这些保留名称。
	5、官网有demo
    "vue-property-decorator": 
    这个组件完全依赖于vue-class-component.它具备以下几个属性:
	@Component (完全继承于vue-class-component)
	@Emit
	@Inject
	@Provice
	@Prop
	@Watch
	@Model
	Mixins (在vue-class-component中定义);
	
	<script lang="ts">
	    import {Vue, Component} from 'vue-property-decorator';
	
	    @Component({})
	    export default class "组件名" extends Vue{
	        ValA: string = "hello world";
	        ValB: number = 1;
	    }
	</script>
    "vue-router": 
    路由
    "vuex": 
    仓库
  },
  devDependencies: {  //开发依赖，开发时候的
    1、"@vue/cli-plugin-babel": 
    包含了@ babel / polyfill 
    文档里提到了集成了 @vue/babel-preset-app，@vue/babel-preset-app 
    文档里提到了集成了 babel-preset-env 这个 babel preset，preset-env 
    会基于你的浏览器目标自动决定要运用的语法转换和 polyfill。
    你觉得要是你设计一个 vue 的 babel 插件会不包含 polyfill? 
    不包含 polyfill 简直就是残疾的 babel，
    只转换新语法，不给新的接口打补丁那还用个毛线的 ES6。

   2、"@vue/cli-plugin-router": 
   路由
    "@vue/cli-plugin-typescript": 
    ts
    "@vue/cli-plugin-vuex": 
    vuex
    "@vue/cli-service": 
    代理服务器node的
    "less": 
    预处理语言
    "less-loader": 
    “其作用是对这部分进行识别和转化处理，例如把less写的转化为css，”
    "typescript": 
    ts本身就是类似检查
    "vue-template-compiler": 
    vue 和 vue-template-compiler 版本必须保持一致，否则会报错。
    该模块可用于将 Vue 2.0 模板预编译为渲染函数（template => ast => render），
    以避免运行时编译开销和 CSP 限制。大都数场景下，与 vue-loader一起使用，
    只有在编写具有非常特定需求的构建工具时，才需要单独使用它
    https://zhuanlan.zhihu.com/p/114239056
  },

接下来就是配置我们项目中的依赖

npm  install  包名  --save  在生产环境中使用（package.json中的scripts下）
npm  install  包名  --save-dev 在开发环境中安装（package.json中的devDependencies下）
npm  install  安装package.json中的所有的依赖
npm  uninstall [<name><version>][-g]/[--save][-dev]  卸载安装的某个包
npm  update    [<name><version>][-g]/[--save][-dev]  更新安装的某个包
npm  init  初始化package.json文件

一、创建vue.config.js文件

devServer: {
        open: process.platform === 'darwin',
        host: '0.0.0.0',
        port: 1234,
        https: false,
        hotOnly: false,
        // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy
        proxy: null, // string | Object
        before: app => {}
    }