说明:
1 --- Vue脚手架是Vue官方提供的标准化开发工具（开发平台）
2 --- 最新的版本是 4.x
3 --- 文档 Vue CLI
具体步骤:
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
脚手架文件结构:
文件目录
├── 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 class="demo"><h2>学校名称：{{ name }}</h2><h2>学校地址：{{ address }}</h2><button @click="showName">点我提示学校名</button></div>
</template><script>export default {name: "School",data() {return {name: "UESTC",address: "成都",};},methods: {showName() {alert(this.name);},},};
</script><style>.demo {background-color: 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: 18,};},};
</script>src/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>src/main.js:
// 该文件是整个项目的入口文件import Vue from 'vue' // 引入Vue
import App from './App.vue' // 引入App组件，它是所有组件的父组件Vue.config.productionTip = falsenew Vue({el:'#app',render: h => h(App), // render函数完成了这个功能：将App组件放入容器中
})// .$mount('#app')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"><!-- 配置页签图标 <%= 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>
render 函数:
import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = falsenew Vue({el:'#app',// render函数功能：将App组件放入容器中// 简写形式render: h => h(App),// 完整形式// render(createElement){// return createElement(App)// }
})关于不同版本的函数:
1--- vue.js与vue.runtime.xxx.js的区别:
avue.js 是完整版的Vue，包含：核心功能+模板解析器
bvue.runtime.xxx.js 是运行版的Vue，只包含核心功能，没有模板解析器
esm 就是 ES6 module
2 --- 因为 vue.runtime.xxx.js 没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容
vue.config.js 配置文件:
vue inspect > output.js可以查看到Vue脚手架的默认配置
使用vue.config.js可以对脚手架进行个性化定制，和package.json同级目录，详见 配置参考 | Vue CLI
module.exports = {pages: {index: {entry: 'src/index/main.js' // 入口}},lineOnSave: false // 关闭语法检查
}
