# 20. Vue CLI 初始化脚手架
# 20.1 初始化脚手架
说明
Vue脚手架是Vue官方提供的标准化开发工具(开发平台)- 最新的版本是
5.x - 文档
Vue CLI
具体步骤
- 如果下载缓慢请配置
npm淘宝镜像npm config set registry http://registry.npm.taobao.org - 全局安装**@vue/cli**
npm install -g @vue/cli1 - 切换到创建项目的目录，使用命令创建项目
vue create xxx - 选择使用
vue的版本 - 启动项目
npm run serve - 打包项目
npm run build - 暂停项目
Ctrl+c
脚手架文件结构
.文件目录
├── 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 文件
# App.vue
<template>
<div>
<img src="./assets/logo.png" alt="">
<School></School>
<Student></Student>
</div>
</template>
<script>
// 引入组件
import School from './components/School.vue'
import Student from './components/Student.vue'
export default {
name:'App',
components:{ School, Student }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# School.vue
<template>
<div class="demo">
<h2>学校名称：{{ name }}</h2>
<h2>学校地址：{{ address }}</h2>
<button @click="showName">点我提示学校名</button>
</div>
</template>
<script>
export default {
name: "School",
data() {
return {
name: "etc",
address: "武汉",
};
},
methods: {showName() {alert(this.name);},},
};
</script>
<style>
.demo {background-color: orange;}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
# Student.vue
<template>
<div>
<h2>学生姓名：{{ name }}</h2>
<h2>学生年龄：{{ age }}</h2>
</div>
</template>
<script>
export default {
name: "Student",
data() {
return {
name: "菠萝咕噜肉",
age: 20,
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# main.js
// 该文件是整个项目的入口文件
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')
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# 关于render
关于不同版本的Vue：
vue.js与vue.runtime.xxx.js的区别：vue.js是完整版的Vue，包含：核心功能+模板解析器vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器
- 因为
vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容
为什么不使用 完整版的 vue.js
- 体积问题
- 没必要导入完整的文件，用不上
import Vue from 'vue'这里引入vue其实是阉割版本的 （没有模板解析器）所以使用
render解析
# index.html
<!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
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
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
# vue.config.js 配置文件
vue inspect > output.js 可以查看到vue脚手架的默认配置
使用vue.config.js 可以对脚手架进行个性化定制，和package.json同级目录，详见 配置参考 | Vue CLl
module.exports = {
pages: {
index: {
entry: 'src/index/main.js' // 入口
}
},
lintOnSave: false // 关闭语法检查
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8