3.1. 初始化脚手架
3.1.1. 说明
- Vue脚手架是Vue官方提供的标准化开发工具（开发平台）
- 最新的版本是 4.x
- 文档 Vue CLI
3.1.2. 具体步骤
- 如果下载缓慢请配置npm淘宝镜像npm config set registry http://registry.npm.taobao.org
- 全局安装 @vue/cli npm install -g @vue/cli
- 切换到创建项目的目录，使用命令创建项目vue create xxx
- 选择使用vue的版本
- 启动项目npm run serve
- 打包项目npm run build
- 暂停项目 Ctrl+C
Vue脚手架隐藏了所有webpack相关的配置，若想查看具体的webpack配置，请执行vue inspect > output.js
3.1.3. 脚手架文件结构
.文件目录
├── 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: 包版本控制文件
src/components/School.vue
<template>
<!-- 组件的结构 -->
<div id='Demo'>
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
<button @click="showName">点我提示学校名</button>
</div>
</template>
<script>
/* 组件交互相关的代码(数据、方法等等) */
export default {
name:'School',
data() {
return {
name:'莆田学院', address:'福建莆田'
}
},
methods: {
showName() {
alert(this.name);
}
},
}
</script>
<style>
/* 组件的样式 */
#Demo{
background: orange;
}
</style>
src/components/Student.vue
<template>
<div>
<h2>学生姓名：{{name}}</h2>
<h2>学生年龄：{{age}}</h2>
</div>
</template>
<script>
export default {
name:'Student',
data() {
return {
name:'cess',
age:20
}
},
}
</script>
src/App.vue
<template>
<div>
<img src="./assets/logo.png" alt="logo">
<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>
src/main.js
/**
* 该文件是整个项目的入口文件
* */
// 引入Vue
import Vue from 'vue';
// 引入App组件，它是所有组件的父组件
import App from './App.vue';
// 关闭vue的生产提示
Vue.config.productionTip = false;
// 创建Vue实例对象---vm
new Vue({
// 将App组件放入容器中
render: h => h(App),
}).$mount('#app')J
public/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">
<!-- 配置页签图标 -->
<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>
<!-- built files will be auto injected -->
</body>
</html>
3.1.4. render 函数
关于不同版本的Vue:
-
vue.js与vue.runtime.xxx.js的区别:
- vue.js是完整版的vue，包含: 核心功能+模板解析器。
- vue.runtime.xxx.js是运行版的vue，只包含: 核心功能;没有模板解析器
-
因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。
/**
* 该文件是整个项目的入口文件
* */
// 引入Vue
import Vue from 'vue';
// 引入App组件，它是所有组件的父组件
import App from './App.vue';
// 关闭vue的生产提示
Vue.config.productionTip = false;
/*
关于不同版本的Vue:
1.vue.js与vue.runtime.xxx.js的区别:
(1).vue.js是完整版的vue，包含: 核心功能+模板解析器。
(2).vue.runtime.xxx.js是运行版的vue，只包含: 核心功能;没有模板解析器
2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用
render函数接收到的createElement函数去指定具体内容。
*/
// 创建Vue实例对象---vm
new Vue({
// 将App组件放入容器中
render: h => h(App),
// render(createElement) {
// return createElement('h1', '你好啊');
// }
// template: `<h1>你好啊</h1>`,
// component: {App}
}).$mount('#app')
3.1.5. vue.config.js 配置文件
vue inspect > output.js可以查看到Vue脚手架的默认配置
使用vue.config.js可以对脚手架进行个性化定制，和package.json同级目录，详见 配置参考 | Vue CLI
const { defineConfig } = require('@vue/cli-service')
module.exports = {
pages: {
index: {
// page 的入口
entry: './src/index/main.js'
}
},
// 关闭语法检查
lintOnSave: false
}
