vue 脚手架_vue脚手架有3.2.1的吗-CSDN博客

本文链接：https://blog.csdn.net/Ulrica_Amaris/article/details/115420505

Vue CLI

什么是Vue CLI

写几个Vue的Demo程序, 那么不需要Vue CLI.

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

使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。

如果每个项目都要手动完成这些工作，那无疑效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。

CLI是什么意思

CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架.

Vue CLI是一个官方发布 vue.js 项目脚手架

使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置.

Vue CLI使用前提 - Node

Node环境要求8.9以上或者更高版本

cnpm安装
由于国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。

可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:

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 CLI的使用

安装Vue脚手架

//这里我室使用cnpm安装了3.2.1版本
cnpm install -g @vue/cli@3.2.1

上面安装的是Vue CLI3的版本，如果需要想按照Vue CLI2的方式初始化项目时不可以的。

在这里插入图片描述
这样就能使用vue cli2.x版本了

Vue CLI2初始化项目

vue init webpack my-project

Vue CLI2详解

在这里插入图片描述

PS E:\project\vs  project\Vue\模块化\webpack\vue\cli2> vue init webpack my-project

? Project name learn-vue-cli2  //项目名称 不能包含大写
? Project description vuecli2   //项目描述
? Author xy <210871791@qq.com>  //作者信息  会默认从git中读取信息
? Vue build runtime  //采用的模板 见后续
? Install vue-router? No  //vue路由 后面自己安装
? Use ESLint to lint your code? No  //检测代码规范 看自己情况
? Set up unit tests No  // 单元测试
? Setup e2e tests with Nightwatch? No  //e2e测试 end yo end
? Should we run `npm install` for you after the project has been created? (recommended) npm

cli2目录结构详解

在这里插入图片描述

Runtime-Compiler和Runtime-only的区别

在之后的开发中，依然使用template，就需要选择Runtime-Compiler

之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only

Runtime-Compiler和Runtime-only中的main.js代码对比

Runtime-Compiler的main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

Runtime-Only的main.js

import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App)
})

为什么存在这样的差异呢？
需要先理解Vue应用程序是如何运行起来的。

Vue中的模板如何最终渲染成真实DOM。
我们来看下面的一幅图。

Vue程序运行过程

在这里插入图片描述
Runtime-Compiler过程
template模板解析成 ast抽象语法树编译成 render函数渲染成 vdom虚拟的dom -> UI界面

Runtime-Only过程(1.性能更高 2.下面的代码量更少)
render函数渲染成 vdom虚拟的dom -> UI界面

总结
所以使用Runtime-Only省去了前三步

直接使用render函数渲染成虚拟dom在展示到UI界面中

这就是为什么Runtime-Only比Runtime-Compiler轻6kb的原因

另外，vue-template-compiler会把template模板解析编译成render函数

最后render: h => h(App)这里的APP是个组件对象 APP里面没有关于template的任何东西，因为都被编译成了render函数

render函数的使用

1.普通用法: createElement(‘标签’, {标签的属性}, [’’])

render: function (createElement) {
    return createElement('h2',
      {class: 'box'},
      ['Hello World', 
      //可以嵌套
      createElement('button', ['按钮'])]) 
  }

2.传入组件对象:

const cpn = {
  template: '<div>{{message}}</div>',
  data() {
    return {
      message: '我是组件message'
    }
  }
}

new Vue({
    el: '#app',
    render: function(createElement) {
        return createElement(cpn)
    }
})

npm run build

在这里插入图片描述

npm run dev

Vue CLI3与 2 的版本区别

vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3

vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录

vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化

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

Vue CLI3初始化项目

vue create my-project

在这里插入图片描述

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes
? Save preset as: xiaoY