一、使用Vue脚手架（Vue Cli）
Vue官方提供脚手架平台选择最新版本：
可以相加兼容的标准化开发工具（开发平台）
禁止：最新的开发技术版本和比较旧版本的开发平台
Vue CLI🛠️ Vue.js 开发的标准工具
https://cli.vuejs.org/zh/
-
c：cmmand
-
l：line
-
i：interface
-
命令行接口工具
1. 下载安装
在cmd中查看vue是否存在cli
全局安装（仅第一次）：
配置npm为淘宝镜像
npm config set registry https://registry.npm.taobao.org
安装：(安装过程中卡顿敲回车继续)
npm install -g @vue/cli
2. 切换到要创建的目录
创建一个项目：vue creat name
执行之后询问执行哪个技术版本
- babel：ES6 ==> ES5
- eslint:js语法检查
选择好之后执行就会配置Webpack配置文件（脚手架环境）
3. 运行脚手架环境的vue文件
npm run serve ：然后就可以看到项目：会开启内置小服务器
二、分析脚手架 ：文件
脚手架工程停止：直接在服务端ctrl+c
babel.config.js: babel控制文件：直接使用官方书写
package-lock.json:包版本控制文件
package.json: 符合npm就会存在包的说明书（依赖，名字，还有常用命令）
README.md： 对整个工程的描述，说明
Src：（打开调试工具并根据执行npm run serve执行过程进行分析）
main,js ：引入Vue和组件（创建Vue实例）=入口文件
/* 该文件是整个项目的入口文件 */ //自动引入vue(完整版vue) import Vue from 'vue' // 自动引入App组件：所有组件的父组件 import App from './App.vue' // 关闭vue生产提示 Vue.config.productionTip = false // 创建vue实例对象：vm new Vue({ // 也可以写成el方式： el: "#app", // 后面了解：完成：将App组件放入容器中功能 render: h => h(App), }) // .$mount('#app')这里将脚手架方式的模板连接转为el方式
APP组件：可以查看路径下的引入路径
assets：静态资源存放位置：png，视频
大驼峰引入组件
public:
图标
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文件查找到name作为当前页面name --> <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>
三、main.js中的render配置项
如果直接使用自己的方式：（模板解析和引入组件）会报错
template:`<h1>你好</h1>` components:{App}
表示正在使用一个运行版本的Vue（vue.runtime.esm.js），模板解析器没有成功获取到
解决：
使用引入完整Vue
使用render配置（解决不完Vue的方式）：将上面自己的方式交给render
//render函数
render(creatElement) {
//必须使用返回值
return creatElement('h1','你好啊')
}
//由于render没有使用this，呢么就可以使用箭头函数
render:creatElement => return creatElement('h1','你好啊')
//用一个简单的此替换creatElement
render:q=> return q('h1','你好啊')
//最后形成
render: h => h('app')总结:
vue.js和vue.runtime.xxx.js的区别：
vue.js是完整的Vue，包含：核心功能+模板解析器
vue.runtime.xxx.js是运行版的Vue，只包含：核心功能，没有模板解析器
因为.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数收到的creatElement函数去指定具体内容
四：脚手架默认配置
main入口文件改为其他名字：然后就无法工作
vue脚手架默认配置整理成js文件查看：vue indpect > output.js（里面默认配置不可以修改）
如果采用默认配置脚手架不可更改部分：
public：ico，index
src
main
配置参考 | Vue CLI🛠️ Vue.js 开发的标准工具
网页中出现的配置参考都可以修改：例如vue.config.js文件可以更改vue的入口
语法检查关闭：lintOnSave
配置参考 | Vue CLI🛠️ Vue.js 开发的标准工具
停止项目
在main文件中添加lintOnSave配置：
lintOnSave：false//关闭语法检查
