vue-cli2和cli3的使用和区别

vue-cli脚手架的使用

  • 使用vue-cli可以快速搭建vue的开发环境,和webpack的配置
  • 安装vue脚手架: npm install -g@vue/cli
  • 上面安装的是vue cli3的版本,如果需要想按照vue cli2的方式初始化项目是不可以的,我们必须要拉取2.x的模板,需要安装全局的桥接工具(官方查看)
  • Vue CLI2 初始化项目
    • vue init webpack my-project
  • Vue CLI3 初始化项目
    • vue create my-project

CLI 2 的使用

  1.  初始化项目:web init webpack mytest(根据这个创建项目文件名),初始化出现配置选项:
     //项目名称
     Project name ...
     //作者的信息,会默认从git中读取信息
     Project description ...
     Author ...
     //vue创建的选项 1.runtime-compiler   2.runtime-only
     vue build ...(一般选runtime-only)
     //是否安装vue-router
     Install vue-router? ..
     //是否使用ESLint检测代码规范
     use ESLint to link your code
     //是否写单元测试 (一般不使用)
     Set up unit tests
     //是否使用Nightwatch来进行e2e测试 (2代表to  e to e 点对点)
     Setup e2e test with Nightwatch?
     //使用npm或者yarn包管理工具
     use npm
     use yarn
  2. Runtime-CompilerRuntime-only的区别
  • runtime-compiler(v1)(运行过程)): template -> ast -> render -> vdom -> UI
  • runtime-only(v2 1.性能更高, 2.代码量更少):render -> vdom -> UI
  • 那.vue文件中的template是由谁处理的呢? 是由vue-template-compiler这个开发时 工具依赖来处理的,他将.vue文件解析成了render函数,解析之后,是没有tamplate这个 东西的
  1. 总结:
  • 如果在开发中,依然使用template,就需要选择Runtime-Compiler
  • 如果在开发中,使用的是.vue文件夹开发,那么可以选择Runtime-Only
  1. render函数的使用
  •   new Vue({
        el:'#app',
        render:(createElement) =>{
          //使用方式一:
          return createElement('标签','相关数据对象(可以不传)',['内容数组'])
          //1.1render函数的基本使用
          return createElement('div',{class:'box'},['xiaohuang'])
          //1.2嵌套render函数
          return createElement('div',{class:'box'},['小黄',createElement('h2',['标题啊'])])
        }
      })
  •   `Runtime-Compiler`和`Runtime-only`在main.js中的不同使用:
    
      1.`Runtime-Compiler`中
      const cpn =Vue.component('cpn',{
        template:'<div>我是cpn组件 </div>',
        data(){
          return{
    
          }
        }
      })
    
      2.`Runtime-only`中
      new Vue({
        el:'#app'
        render:(createElement)=>{
          //使用方法二:传入一个组件对象
          return createElement(cpn)
        }
      })

CLI 3的使用

  1. 初始化项目:vue create my-project
  2.  //选择一个配置方式
     please pick a perset  (一般选最后一个Manually select features(手动选择特性) )
     //选择对于你的工程所需要的特性 (用空格选择)
     check the features needed for your project
     //对应的配置文件单独生成还是放在package.json里
     where do you prefer placing config for babel
     //要不要把刚才自己选择的配置保存下来
     save this as a preset for future projects?
  3. pubilc文件相当于CLI2中的static目录
  4. 配置都去哪里了,可以启动配置服务器 vue ui查看(全局命令)
上一篇:webpack vue-cli2 配置打包测试环境


下一篇:Vue项目快速构建工具(cli2/cli3)使用详解