• VueCLI相关
  • 什么是Vue CLI
  • Vue CLI使用前提 - Node、Webpack
  • Vue CLI的使用
• Vue CLI2创建项目时配置
• Vue CLI3创建项目时配置
• runtime compiler与runtime-only的区别
• Vue CLI3配置文件的查看和修改

VueCLI相关

什么是Vue CLI

• 如果你在开发大型项目，那么你需要，并且必然需要使用Vue CLI

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

• CLI：

  • Command-Line Interface，翻译为命令行界面，但是俗称脚手架
  • Vue CLI 是一个官方发布vue.js项目脚手架
  • 使用vue-cli可以快速搭建Vue开发环境以及对应的webpack配置
  • 命令行界面：只要输入几个简单的命令就可以完成一些配置(router等)

Vue CLI使用前提 - Node、Webpack

Vue CLI的使用

• 安装脚手架(一般安装到全局即可)

  npm install -g @vue/cli
  

  • vue脚手架3的基础上可以拉取脚手架2的，所以没必要单独安装脚手架2

  • 上面安装可能失败，建议安装cnpm，后安装vue3.2.1

    npm install -g cnpm -registry=https://registry.npm.taobao.org
    // 环境变量的问题请百度
    npm install -g @vue/cli@3.2.1
    

• 注意：上面安装的是VueCLI3的版本，如果需要想安装VueCLI2的方式初始化项目是不可以的。

  拉去2.x模板(旧版本)

• Vue CLI2初始化项目

  vue init webpack my-project
  

• Vue CLI3初始化项目

  vue create my-project
  

• 注意：到要创建项目的目录下，cmd执行命令，或者直接在idea中执行

Vue CLI2创建项目时配置

• 目录结构
  • build、config配置文件
  • node_modules：package打包的依赖
  • src：代码相关
  • static：静态资源，会原封不动的放到dist文件夹下
  • .babelrc：当配置了Babel转换代码时，配置此文件，默认转换[市场份额大于1%的，最后两个版本，ie>8的]

Vue CLI3创建项目时配置

• vue-cli3与2版本有很大区别
  • vue-cli3是基于webpack4打造,vue-cli2还是webpack3
  • vue-cli3的设计原则是"0配置", 移除配置文件根目录下的build和config等目录
  • vue-cli3提供了vue ui命令, 提供了可视化配置, 更加人性化
  • 移除了static文件夹, 增加了public文件夹, 并且index.html移动到public中
• 目录结构
  • node_modules: package打包的依赖
  • public: 相当于以前的static
  • src: 源代码
  • .browserverslistrc: 浏览器限制配置相关
  • .postcss.config.js: 修改css相关

runtime compiler与runtime-only的区别

1. 当把一个模板传给Vue的时候，会把template在vm.options中做一个保存
2. 把template解析成ast(abstract syntax【抽象语法树】)
3. 把ast编译成render函数
4. 把template最终翻译成虚拟DOM树(再显示成真正的UI)
5. 虚线部分为数据的监听，双向绑定

• 如果使用runtime-compiler

  tempalte -> ast -> render -> vdom -> UI
  

• 如果使用runtime-only：优点：性能更高，体积更小

  render -> vdom -> UI
  

  h：createElement函数

  createElement('标签', {属性：属性值;属性: 属性值}, ['值1', '值2'])

• 那么将来开发中,依然使用template,就需要选择Runtime-Compiler

• 如果使用.vue文件开发,那么可以选择Runtime-only

Vue CLI3配置文件的查看和修改

• UI方面的配置

  • 启动配置服务器:

    vue ui
    

  • node_modules > @vue > cli-service >webpack.config.js只能查看

  • 修改配置: 创建vue.config.js文件: