21-CLI 初始化脚手架

1. Vue CLI 初始化脚手架

  1. Vue脚手架是Vue官方提供的标准化开发工具（开发平台）
  2. 最新的版本是 4.x
  3. 文档 Vue CLI

1.1 具体步骤

  1. 如果下载缓慢请配置npm淘宝镜像 npm config set registry http://registry.npm.taobao.org
  2. 全局安装 @vue/cli npm install -g @vue/cli
  3. 切换到创建项目的目录，使用命令创建项目 vue create xxx
  4. 选择使用vue的版本
  5. 启动项目 npm run serve
  6. 打包项目 npm run build
  7. 暂停项目 Ctrl+C

Vue脚手架隐藏了所有webpack相关的配置，若想查看具体的webpack配置，请执行 vue inspect > output.js

1.2 脚手架文件结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.文件目录
├── node_modules 
├── public
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   └── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
└── package-lock.json: 包版本控制文件

1.3 脚手架 demo

components: 就直接把单文件组件的 School.vue 和 Student.vue 两个文件直接拿来用，不需要修改。

App.vue: 引入这两个组件，注册一下这两个组件，再使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <Student></Student>
    <School></School>
  </div>
</template>

<script>
import School from './components/School.vue'
import Student from './components/Student.vue'

export default {
  name: 'App',
  components: {
    School,
    Student
  }
}
</script>

main.js: 入口文件

1
2
3
4
5
6
7
8
9
10
11
// 该文件是整个项目的入口文件

import Vue from 'vue'				// 引入Vue
import App from './App.vue'	// 引入App组件，它是所有组件的父组件

Vue.config.productionTip = false

new Vue({
  el:'#app',
  render: h => h(App),			// render函数完成了这个功能：将App组件放入容器中
})// .$mount('#app')

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
  
    <!-- 针对IE浏览器的特殊配置，含义是让IE浏览器以最高渲染级别渲染页面 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  
    <!-- 开启移动端的理想端口 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
    <!-- 配置页签图标 <%= BASE_URL %>是public所在路径，使用绝对路径 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  
    <!-- 配置网页标题 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
  
    <!-- 当浏览器不支持js时，noscript中的元素就会被渲染 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    
    <!-- 容器 -->
    <div id="app"></div>
</body>
</html>

1.3 render函数

一个小知识： 使用 import 导入第三方库的时候不需要 加 ‘./‘

1
2
3
4
5
// 导入我们自己写的：
import App from './App.vue'

// 导入第三方的
import Vue from 'vue'

不需要在 from ‘vue’ 加 './' 的原因是第三方库 node_modules 人家帮我们配置好了。

我们通过 import 导入第三方库，在第三方库的 package.json 文件中确定了我们引入的是哪个文件

image-20220630173839543

通过 module 确定了我们要引入的文件。

备注：这是ESM默认导入的文件，CommonJS默认导入mian中路径的文件

回到 render 函数，之前的写法是这样：

1
2
3
4
5
6
7
import App from './App.vue'

new Vue({
  el:'#root',
  template:`<App></App>`,
  components:{App},
})

如果这样子写，运行的话会引发如下的报错

image-20220630174043948

报错的意思是，是在使用运行版本的 vue，没有模板解析器。

从上面的小知识可以知道，我们引入的 vue 不是完整版的，是残缺的（为了减小vue的大小）。所以残缺的 vue.js 只有通过 render 函数才能把项目给跑起来。

来解析一下render

1
2
3
4
5
6
7
8
9
10
11
12
13
// render最原始写的方式
// render是个函数，还能接收到参数a
// 这个 createElement 很关键，是个回调函数
new Vue({
  render(createElement) {
    // 这个 createElement 回调函数能创建元素
    // 因为残缺的vue 不能解析 template，所以render就来帮忙解决这个问题
    // createElement 能创建具体的元素
    return createElement('h1', 'hello')
    // 简写新式
    // return h => h(App),
  }
}).$mount('#app')

1.5 关于不同版本的函数

来个不同版本 vue 的区别

  • vue.js 与 vue.runtime.xxx.js 的区别：
    • vue.js 是完整版的Vue，包含：核心功能+模板解析器。
    • vue.runtime.xxx.js 是运行版的Vue，只包含：核心功能；没有模板解析器。esm 就是 ES6 module
  • 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。

1.6 vue.config.js 配置文件

vue inspect > output.js可以查看到Vue脚手架的默认配置

使用 vue.config.js 文件可以对脚手架进行个性化定制，和 package.json 同级目录，详见 配置参考 | Vue CLI

1
2
3
4
5
6
7
8
module.exports = {
  pages: {
    index: {
      entry: 'src/index/main.js' // 入口
    }
  },
  lineOnSave: false	// 关闭语法检查
}
Vue
#Vue
21-CLI 初始化脚手架
https://flepeng.github.io/021-frontend-04-Vue-01-course-21-CLI-初始化脚手架/
作者
Lepeng
发布于
2023年8月10日
许可协议