关于vue-cli的那些事情

关于vue-cli以前我总是不太理解，直到上手项目用了"几次"这才赶紧写下来留个记录，还有不足的地方请大家勿喷 哈哈哈！！！
Vue CLI
* CLI是command-Line Interface，翻译为命令行界面，但是俗称脚手架
* 使用Vue-cli可以快速搭建Vue开发环境以及对应的webpack配置
* Vue-cli是官方发布的vue.js项目脚手架

使用Vue CLI使用前提-Node 安装nodeJS
* 可以直接在官方网站中下载安装
* 网址：http：//nodejs.cn/download/
* 请移步到这里额 node.js
检测安装的版本
* 默认情况下自动安装Node和Npm
* Node环境要求8.9以上或者更高版本
* node-v（v10.5.0）-------- npm-v（6.1.0）

什么是NPM
* NPM的全称是Node Package Manager
* 是一个NodeJs包管理和分发工具，已经成为了非官方发布的Node模块（包）的标准
* 以后会经常使用NPM来安装一些依赖包

cnpm安装
* 由于国内直接使用npm的官方镜像是非常慢的，这里就推荐使用NPM镜像
* 也可以使用淘宝定制的cnpm（gzip压缩支持）命令行工具代替默认的cnpm
* npm install -g cnpm --registry=https：//registry.npm.taobao.org
* 这样就可以使用cnpm命令来安装模块了 cnpm install 【name】

Vue Cli 使用前提 - webpack vue.js官方脚手架工具就使用了webpack模板
* 对所有的资源会压缩等优化操作
* 它在开发过程中提供已完整的功能，

Webpack的全局安装
* npm install webpack -g

vue cli3的使用 （安装vue3脚手架）-g（global全局）
* npm install -g @vue/cli (安装vue cli 3 （3.0.4）)想要安装3以上的版本必须先把旧的版本先卸载再去重新安装

Vue Cli3初始化项目
* vue create my-project（项目名称）

安装vue cli 2 拉取2.x
* npm install -g @vue/cli-init

Vue Cli2初始化项目
* vue init webpack my-project（项目名称）

*    ？ Project name （vuecli2test）（直接敲回车，默认使用此名称）
*   ？ Project description （A vue. js  project）（重新写个描述 test vue cli2）
*   ？ Author （codeerYJ 《在gitconfigjs配置过得自己的信息》项目的作者）
*     vue bulid （Use arrow keys）（用哪一个来构建项目）
*        Runtime + Complier： recommended for most users（大多数用户使用的，新手首选）
*        Runtime + only： about  6kb lighter min+gzip（优点1 打包的文件位置很小，运行的效率高，代码量更少）
*     ？install vue-router？（y/n）(是否要安装路由)     vue全家桶:(vueCore+vue-router+vueX）
*     ？Use ESLint to lint your code？（y/n）（是否安装Eslint检测语法）
*        ？Pick an ESlint preset （use arrow keys）（请选择一种规范）
*              standard （http：// github.com/standard/standard）(标准的规范)
*              Airbnb（http：// github.com/Airbnb/javascript）（爱彼迎的规范）
*              none （configure it yourself）（配置自己的规范）
*      ？Set up unit tests （y/n）（单元测试）
*      ？Setup e2e tests with Nightwatch？（y/n） （e2e：端到端的测试）（依赖Nightwatch结合 selenlum形成的自动化测试）
*      ？should we run `npm install` for you after the project haas been created? (recommended) (管理项目，要使用npm还是yarn)
*           yes， use NPM （一般使用npm）
*           yes， use Yarn

箭头函数var f=v => vvar f=function(v){return v}this.chardata.(map)function(item){return item.name} 安装vue cli始终安装不成功（node卸载也不可） 解决方法：找到c盘中的user下的adminstrator找到appdata下的roaming找到以n开头的npm-cache删除此文件 main.js中 dependencies是运行时依赖 devDependcies是开发时依赖如何关闭ESlint检测 在config文件夹下找到index.js下的useESlint将其改为falseVue cli3 的更新
* 没有了build和config的代码
* vue-cli3是基于 文本pack打造的 vue-cli还是webpack3
* 移除了static文件夹，新增了public文件夹，并且index.html移动到public
* vue-cli3提供了vue ui命令，提供了可视化配置，更加人性化

安装 Vue cli4
* vue creat 项目名称
* ？please pick a preset：（use arrow keys （preset：配置））

       default （babel，eslint）           Manually select features（manually（手动）feature（特性））
* Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)：按空格来进行选择或者取消

（）Babel 星号表示选中（）TypeScript 星号表示选中（）progressive Web APP (PWA) Support 星号表示选中（progressive:先进的）（）Router星号表示选中（）vuex星号表示选中（）CSS pre - processors 星号表示选中（）Linter / Formatter 星号表示选中（）Unit Testing 星号表示选中（）E2E Testing 星号表示未选中
* Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)(你是准备把这些文件单独放到一个文件中还是选择放到package.json)

          In dedicated config files（放到独立的配置文件中）              In package.json（或者放进package.json配置中）
*   Save this as a preset for future projects? (y/N)（future：将来）（是否将此保存为将来的目的预设？）
*   Save preset as:  ‘要保存的名字’（你准备保存什么名字）
*   Pick the package manager to use when installing dependencies: (Use arrow keys)

                 Use Yarn （选择Yarn来运行）                 Use NPM （选择npm来运行）vuecli4和vuecli3的区别        vuecli3有postcss.config.js vuecli4没有postcss.config.js

vuecli4配置去哪里了？
1 通过vue ui来修改配置，添加插件或者依赖，以及能在图形化上面运行程序
2 想要看安装最正确的vue文件版本：1. 再nodemodules中找到vue下的types中的 package.json中的 ‘id’：‘vue@^2.6.12’版本为准或者打包后的dist中的 vue.j
3 如果想要修改配置，直接再这个文件内新建vue.config.js（严格按照这样命名） 在文件中写上

module.exports = {
}

其实还有另外一种创建的方式 就是图形化界面创建，因为自己不常用就没有再去做详细的赘述了，不喜勿喷额😜