Vue脚手架
一、单文件组件
1. 单文件组件定义
单文件组件：*.vue文件，类似HTML格式的文件。Vue的单文件组件会将一个组件的逻辑(JavaScript)、模板(HTML)和样式(CSS)封装在同一个文件里。
-
组件模板HTML：
template标签 -
组件逻辑JS：
script标签 -
样式CSS：
CSS标签
二、单文件组件模板
<template>
<!--组件的结构-->
</template>
<script>
// 组件交互相关的代码
</script>
<style>
/* 组件的样式 */
</style>
三、初始化脚手架
1. 说明
- Vue脚手架是Vue官方提供的
标准化开发工具(开发平台) - 最新版本是
4.x
2. 具体步骤
-
全局安装：@vue/cli(仅第一次执行)，
npm install -g @vue/cli -
创建项目：切换到要创建项目的目录，然后创建项目
vue create xxxxx -
启动项目：
npm run serve -
打包项目：
npm run build -
暂停项目：
Ctrl + C
备注：
-
配置淘宝镜像：
npm config set registry https://registry.npm.taobao.org -
Vue脚手架隐藏了所有webpack相关的配置，若想查看具体的webpack配置，请执行：
vue inspect > output.js
四、分析脚手架结构
执行完npm run serve之后，直接运行main.js
main.js
/**
* 该文件是整个项目的入口文件
*/
// 引入Vue
import Vue from 'vue'
// 引入App组件，它是所有组件的父组件
import App from './App.vue'
// 关闭Vue的生产提示
Vue.config.productionTip = false
// 创建Vue实例对象vm
const vm = new Vue({
// 完成了将App组件放入容器
render: h => h(App),
})
vm.$mount('#app')
// $mount是容器的id，也可以写成el:'#app'
来到App.vue，它是所有组件的父组件
App.vue
<template>
<div>
<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>
<style scoped>
</style>
自定义了两个组件分别是Student.vue和School.vue
Student.vue
<template>
<div>
<h1>我的名字是:{{name}}</h1>
<h1>我的年龄是:{{age}}</h1>
</div>
</template>
<script>
// 默认暴露
export default {
// 组件的唯一标识
name: 'Student',
// data必须写成函数：避免组件被复用时，数据存在引用关系
data() {
return {
name: "张三",
age: 18
}
},
}
</script>
<style>
</style>
School.vue
<template>
<div id="Demo">
<h2>学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
<button @click="showInfo">点我提示学校名</button>
</div>
</template>
<script>
export default {
name: 'School',
data() {
return {
name: '家里蹲大学',
address: '家里'
}
},
methods: {
showInfo() {
alert(this.name);
}
},
}
</script>
<style>
#Demo{
background: red;
}
</style>
- 来到主页面
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">
<!-- 配置网页标题 package.json中 -->
<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>
<!-- built files will be auto injected -->
</body>
</html>
整个流程分析：
1. 执行npm run serve 随后来到src目录找到main.js，引入了vue，引入了app.vue
2. 找到app.vue，随后又去执行School,vue和Student.vue
3. main.js中随后关闭vue的生产提示，创建vue实例对象，然后将app组件放入容器中
4. 最后找到index.html，放入app容器中