[JavaScript知识库]Vue CLI基本了解

Vue CLI

1. Vue脚手架(CLI)简介

   —在Vue.js中开发大型应用时，需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等，如果每个项目都要手动完成这些工作，无疑于效率比较低，所以通常使用一些脚手架工具来帮助完成这些事情；

   —CLI：Command - Line - Interface，命令行界面，俗称脚手架；其是官方发布的vue.js项目脚手架；使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置；

   —CLI依赖Node环境和webpack，需要下载安装NodeJS，Node环境要求8.9以上或者更高版本；

   —安装脚手架Vue CLI3版本的命令：npm install -g @vue/cli

   —Vue CLI3和旧版使用相同的vue命令，所以会将Vue CLI2覆盖，如果想要使用旧版功能，需要安装一个桥接工具：npm install -g @vue/cli-init

2. VueCLI2初始化项目过程

   —node是使用C++开发的，核心为V8引擎（Chrome）；

   —js/java—>字节码—>浏览器，但是V8引擎直接将代码翻译成二进制代码；

   —Vue CLI2创建项目：vue init webpack my-project；Vue CLI3创建项目：vue create my-project

   如果安装错误，可以执行试一下npm clean cache -force，这里需要使用管理员身份运行；如果还不可以，可以去C:\Users\Sunym\AppData\Roaming\npm-cache将npm-cache删除，在进行安装；

   —项目目录结构解析

   —ESLint规范让代码更规范，但是因为规范的问题出现很多错误；可以在项目目录下config文件夹中index.js中将useEsLint改为false关掉EsLint；

   RuntimeCompiler和RuntimeOnly的区别

   —RuntimeCompiler在使用组件时，先在vue实例中components里面注册，然后将注册组件放到template；而RuntimeOnly是在vue实例中render中构建一个函数；

   —RuntimeCompilerVue程序运行过程：template—>ast(抽象语法树)—>render—>vdom(虚拟DOM)—>真实DOM渲染UI；

   —RuntimeOnlyVue程序运行过程：render—>vdom(虚拟DOM)—>真实DOM渲染UI；因此其代码量更少，性能更高；

   —解析render，注意vue实例中el中的内容最终会被render中组件内容替换掉：

   render:function(createElement){
    //1.普通用法：createElement('标签',{标签属性},['标签内容'])
    return createElement('h2',
                         {class:'box'},
                         ['Hello World'],
                        createElement('button',['按钮']))
    //2.传入组件对象
    return createElement(cpn)
   }
   

3. Vue CLI3初始项目过程

   —vue-cli3是基于webpack4打造，而vue-cli2是基于webpack3；

   —vue-cli3的设计原则是"0配置"，移除的配置文件根目录下的build和config等目录；

   —vue-cli3提供了vue ui命令，提供可视化配置，更加人性化；

   —移除static文件夹，新增了public文件夹，并且index.html移动到public中；

   VueCLI3配置文件的查看和修改

   —像插件等安装的版本，在package.json中不一定是真实安装的版本，可以去package.json中查看id属性，另外就是去看打包以后的文件查看版本；

   —（1）可以通过vue ui实现图形化界面的配置；

   —（2）VueCLI3创建项目后，并没有将配置删除，而是将其隐藏起来了；可以在创建的node_modules library root文件夹下的@vue下cil-service下会有一个webpack.config.js配置文件；然后打开该文件，会发现该文件导入的是当前文件夹下的lib文件夹下的Service.js文件，该文件也会引入其他许多配置文件；

   —（3）自定义配置文件，我们可以创建一个vue.config.js文件，注意这里需要使用git命令将其提交给本地服务器git commit；然后再文件中配置命令的导出module.exports={}，然后会自动将我们导出的配置与项目本身隐藏的配置进行合并作为webpack的整体配置！注意！！！vue.config.js的名称不可以改变！