VueCLI

什么是VueCLI

  • 如果只是简单写几个Vue的Demo程序,那么不需要Vue CLI
  • 如果在开发大型项目,需要使用Vue CLI
    • 使用Vue.js开发大型应用时,需要考虑代码目录结构,项目结构和部署、热加载、代码单元测试等事情
    • 如果每个项目都要手动完成这些工作,那无疑效率是比较低的,所以通常我们会使用一些脚手架工具来帮助完成这些事情
  • CLI是什么意思?
    • CLI是Command-Line Interface,翻译为命令行界面,但是俗称脚手架
    • Vue CLI是一个官方发布的Vue.js项目脚手架
    • 使用Vue CLI 可以快速搭建Vue开发环境以及对应的webpack配置

前提

  • Node
  • webpack

VueCLI3和VueCLI2的区别

  • vue-cli 32 版本有很大区别
    • vue-cli 3 是基于 webpack 4 打造,vue-cli 2还是webpack 3
    • vue-cli 3的设计原则是0配置,移除了配置文件根目录下的buildconfig等目录
    • vue-cli 3提供了vue ui命令,提供了可视化配置,并且更加人性化
    • 移除了static文件夹,新增了public文件夹,并且index.html移动到public

VueCLI的使用

安装

npm install @vue/cli -g --registry=https://registry.npm.taobao.org
#这里安装的是Vue CLI 3的版本,如果想要按照VueCLI2的方式初始化项目是不可以的
#指定一下源,不然太慢
npm install @vue/cli-init -g --registry=https://registry.npm.taobao.org
#Vue CLI 3和旧版使用了相同的vue 命令,所以Vue CLI2( vue-cli )被覆盖了。如果你仍然需要使用
#旧版本的vue init 功能,你可以全局安装一个桥接工具:
npm clean cache -force
#若安装失败,试着先使用这个命令清空缓存再安装
 

初始化项目

vue init webpack my-project
#脚手架2创建方式
vue create my-project
#脚手架3创建方式
 

runtime-compiler和runtime-only区别

​ 内容主要区别在于scr文件夹下的main.js

  • runtime-compiler(Vue1)

    new Vue({
      el:'#app',
      template:'<App/>'
      components:{
        App
      }
    })
     
    • template——>ast(abstract syntax tree)抽象语法树——>render——>virtual DOM——>UI
  • runtime-only(Vue2)

    new Vue({
      el:'#app',
      render:h => h(App)
      //render:function(h){return h(App)}
      //其中的h其实是个方法,为createElement
      //普通用法:createElement('标签名',{标签的属性},['标签内容'])
      //如 createElement('h2',{ class:'box' },['我是h2标签'])
      //传入组件对象:createElement(component)
      //其中的组件对象已经没有template了,已经被vue-template-compiler解析了
    })
     
    • render——>virtual DOM——>UI
    • 效率更高,代码更少,大约少6KB

简单总结

  • 如果之后的开发中,依然使用template,就需要选择runtime-compiler
  • 如果之后的开发中,使用.vue文件开发,那么就使用runtime-only

VueCLI3配置文件的查看和修改

  1. 使用vue ui 命令,在图形化界面修改

  2. node_modules ——>@vue ——>cli-service ——>lib ——>config

  3. 在根目录下新建vue.config.js文件,脚手架会自动合并该文件

    module.exports={
      //...
    }
     

文件路径的别名

脚手架2中配置

//config目录下的webpack.base.config.js
function resolve (dir) {
  return path.join(__dirname, '..', dir)
}
module.exports = {
  resolve:{
    alias:{
      '@': resolve('src'),//以后使用src时,可以用@替代,以后在复制路径的时候就不用修改了
      'assets': resolve('@/assets'),//在脚手架3中可以这么用
      'assets': resolve('src/assets')//在脚手架2中只能这么用
    }
  }
}
//在 import 中的路径 可以直接用
//但是在img标签中src之类的 必须在别名之前加一个 ~ 符号
//如 <img src="~assets/img/home.svg"/>
 

脚手架3中配置

const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  lintOnSave: true,
  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('components', resolve('src/components'))
  }
}
 

原创文章,作者:我心飞翔,如若转载,请注明出处:https://www.pipipi.net/14670.html

发表评论

登录后才能评论