4.2 package.json
4.3 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), // 指定vue控制的容器 }).$mount('#app')
4.3.1 render()
在main.js中使用render()函数将App组件放入容器中，是由于在脚手架中默认引入的vue不是完整的vue，而是缺少模板解析器的vue。
vue.js与vue.runtime.xxx.js的区别：
(1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
(2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
模板解析器是用于解析vue配置项中的template配置项。将vue中的模板解析器去除后，可以节省项目的占用空间，同时也更加符合逻辑，因为项目构建后已经是浏览器可以解析的html、css、js等文件，不再需要模板解析器。
render()的完整写法：
//创建Vue实例对象---vm new Vue({ // 将App组件放入容器中 // 简写,由于此函数不需要使用this，可以写成箭头函数 // 然后再对箭头函数进行简写 // render: h => h(App), // 完整写法 render(createElement) { // render函数接收一个创建页面元素的createElement函数， // 用于创建页面元素 // render()函数将创建的元素返回，再将其放入容器中 return createElement(App) } // 指定vue控制的容器 }).$mount('#app')
//创建Vue实例对象---vm new Vue({ // 将App组件放入容器中 // 简写,由于此函数不需要使用this，可以写成箭头函数 // 然后再对箭头函数进行简写 // render: h => h(App), // 完整写法 // render(createElement) { // render函数接收一个创建页面元素的createElement函数， // 用于创建页面元素 // render()函数将创建的元素返回，再将其放入容器中 // return createElement(App) // } render(createElement) { // 创建返回 <h1>hello world</h1> return createElement('h1', 'hello world') } // 指定vue控制的容器 }).$mount('#app')
App组件外的其他组件使用模板<template>标签能够被放入页面，是由于vue脚手架为其配置了模板编译的第三方包。
4.4 App.vue
// 框架 <template> <div id="app"> <img alt="Vue logo" src="./assets/logo.png"> <HelloWorld msg="Welcome to Your Vue.js App"/> </div> </template> // 交互 <script> //引入组件 import HelloWorld from './components/HelloWorld.vue' // 向外默认导出本组件 export default { name: 'App', components: { HelloWorld } } </script> // 样式 <style> #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
4.5 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文件夹所在的路径，防止项目部署后出现路径的错误--> <!-- 所以在该html文件中路径不使用 ./ ../ --> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <!-- 网页的标题 --> <title><%= htmlWebpackPlugin.options.title %></title> </head> <body> <!-- 浏览器不支持js，页面会显示noscript标签中的内容；支持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>
<%= htmlWebpackPlugin.options.title %>会到项目的package.json文件中寻找项目的name配置项
5. 修改默认配置
5.1 查看项目的默认配置
Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置，终端运行：
vue inspect > output.js
5.2 修改项目的默认配置
可以修改的配置项以及如何修改可以参考官网：
在项目文件夹下新建 vue.config.js 文件，要修改的配置项都写在该文件中。vue脚手架会将修改的配置项与默认的配置项进行整合。
只要在 vue.config.js 文件中修改了配置项，就要重新启动项目。
vue.config.js 文件中不能什么配置都不写，要么不写不创建 vue.config.js 文件，要么创建了 vue.config.js 文件就要写配置项，至少一个。
5.2.1 修改入口文件名
// 使用 @vue/cli-service 提供的 defineConfig 帮手函数，以获得更好的类型提示 // vue.config.js const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ // 选项 pages: { index: { // 入口 entry: 'src/my_main.js' } } })
5.2.2 关闭代码语法检查
// 使用 @vue/cli-service 提供的 defineConfig 帮手函数，以获得更好的类型提示 // vue.config.js const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ // 选项 pages: { index: { // page 的入口 entry: 'src/my_main.js' } }, // 关闭语法检查 lintOnSave: false })
