说明
- Vue脚手架是Vue官方提供的标准化开发工具（开发平台）
- 文档 https://cli.vuejs.org/zh/
具体步骤
脚手架文件结构
.文件目录
├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── components: 存放组件的目录
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件【它是所有组件的父组件（一人之上，万人之下）】
│ └── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
└── package-lock.json: 包版本控制文件
package.json
"scripts": {
"serve": "vue-cli-service serve", //npm run serve 开发，调试
"build": "vue-cli-service build", //npm run build 构建编译，发布
"lint": "vue-cli-service lint" //npm run lint 代码语法检查
}
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">
<!-- 配置网页标题 Webpack的插件到package.json中的nam中找-->
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
</head>
<body>
<!-- 当浏览器不支持js时，noscript中的元素就会被渲染 -->
<noscript>
<strong>
你的浏览器不支持JavaScript, <%= htmlWebpackPlugin.options.title %> 无法正常工作
</strong>
</noscript>
<!-- 容器 -->
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
main.js
/*该文件是整个项目的入口文件*/
//引入Vue （vue.runtime.esm.js 阉割版没有解析器）
import Vue from 'vue'
//引入App组件，它是所有组件的父组件（一人之上，万人之下）
import App from './App.vue'
//关闭vue的生产提示
Vue.config.productionTip = false
//创建 Vue实例对象 ---vm
let vm=new Vue({
// el:'#app', //显式调用 vm.$mount()
//渲染函数 将App组件放入容器中
// render: h => h(App),//简写
render(createElement){
//完整写法
return createElement(App)
}
})
vm.$mount('#app')
vue.config.js 配置文件 (修改了要重新运行)
- 查看到Vue脚手架的默认配置命令
vue inspect > output.js
- 使用 vue.config.js 可以对脚手架进行个性化定制，和 package.json 同级目录，详见 配置参考 | Vue CLI
/*
配置 参考https://cli.vuejs.org/zh/config/#pages
*/
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
///*关闭语法检查*/
lintOnSave: false,
//修改 默认入口（main.js） 为index.js
pages: {
index: {
entry: 'src/index.js' // page 的入口
}
}
})
