src_分析脚手架
文章发布较早,内容可能过时,阅读注意甄别。
# 代码
# 代码路径
$ tree -N
.
├── App.vue
├── assets
│ └── logo.png
├── components
│ ├── SchoolName.vue
│ └── StudentName.vue
└── main.js
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# App.vue
<template>
<div>
<img src="./assets/logo.png" alt="logo" />
<SchoolName></SchoolName>
<StudentName></StudentName>
</div>
</template>
<script>
// 引入组件
import SchoolName from "./components/SchoolName";
import StudentName from "./components/StudentName";
export default {
name: "App",
components: {
SchoolName,
StudentName,
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
# SchoolName.vue
<template>
<!-- 组件的结构 -->
<div class="demo">
<h2>学校名称:{{ name }}</h2>
<h2>学校地址:{{ address }}</h2>
<button @click="showName">点我提示学校名</button>
</div>
</template>
<script>
// 组件交互相关的代码(数据,方法等)
export default {
name: "SchoolName",
data() {
return {
name: "尚硅谷",
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
25
26
27
28
29
30
31
32
33
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
29
30
31
32
33
# StudentName.vue
<template>
<!-- 组件的结构 -->
<div>
<h2>学生姓名:{{ name }}</h2>
<h2>学生年龄:{{ age }}</h2>
</div>
</template>
<script>
// 组件交互相关的代码(数据,方法等)
export default {
name: "StudentName",
data() {
return {
name: "eryajf",
age: 18,
};
},
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# main.js
// 改文件是整个项目的入口文件
// 引入Vue
import Vue from "vue";
// 引入App组件,它是所有组件的父组件
import App from "./App.vue";
// 关闭Vue的生产提示
Vue.config.productionTip = false;
// 创建Vue实例对象---vm
new Vue({
el: "#app",
render: (h) => h(App),
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 笔记
脚手架文件结构
├── 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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
关于不同版本的 Vue
vue.js
与vue.runtime.xxx.js
的区别:- vue.js 是完整版的 Vue,包含:核心功能 + 模板解析器。
vue.runtime.xxx.js
是运行版的 Vue,只包含:核心功能;没有模板解析器。- 因为
vue.runtime.xxx.js
没有模板解析器,所以不能使用 template 这个配置项,需要使用 render 函数接收到的createElement
函数去指定具体内容。
vue.config.js 配置文件
- 使用
vue inspect > output.js
可以查看到 Vue 脚手架的默认配置。 - 使用
vue.config.js
可以对脚手架进行个性化定制,详情见:https://cli.vuejs.org/zh (opens new window)
上次更新: 2024/06/13, 22:13:45