标签：分析 vue App js Vue 组件 脚手架 config
脚手架文件结构
├── 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：包版本控制文件
项目入口文件--main.js
vue.js与vue.runtime.xxx.js的区别： 1. vue.js是完整版的Vue，包含：核心功能 + 模板解析器。 2. vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。 2. 因为vue.runtime.xxx.js没有模板解析器，所以不能使用template这个配置项，需要使用render函数接收到的createElement函数去指定具体内容。
1 /*
2 该文件是整个项目的入口文件
3 */
4 //引入Vue
5 import Vue from 'vue'
6 //引入App组件，它是所有组件的父组件
7 import App from './App.vue'
8 //关闭vue的生产提示
9 Vue.config.productionTip = false
10
11 /*
12 关于不同版本的Vue：
13
14 1.vue.js与vue.runtime.xxx.js的区别：
15 (1).vue.js是完整版的Vue，包含：核心功能+模板解析器。
16 (2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。
17
18 2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用
19 render函数接收到的createElement函数去指定具体内容。
20 */
21
22 //创建Vue实例对象---vm
23 new Vue({
24 el:'#app', // 等价于 .$mount('#app')
25 //render函数完成了这个功能：将App组件放入容器中
26 render: h => h(App),
27 // render:q=> q('h1','你好啊')
28
29 // template:`<h1>你好啊</h1>`,
30 // components:{App},
31 })
View Code
App组件，它是所有组件的父组件
1 <template>
2 <div>
3 <img src="./assets/logo.png" alt="logo">
4 <School></School>
5 <Student></Student>
6 </div>
7 </template>
8
9 <script>
10 //引入组件
11 import School from './components/School'
12 import Student from './components/Student'
13
14 export default {
15 name:'App',
16 components:{
17 School,
18 Student
19 }
20 }
21 </script>
app.vue
主页面 -- index.html
1 <!DOCTYPE html> 2 <html lang=""> 3 <head> 4 <meta charset="utf-8"> 5 <!-- 针对IE浏览器的一个特殊配置，含义是让IE浏览器以最高的渲染级别渲染页面 --> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <!-- 开启移动端的理想视口 --> 8 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 9 <!-- 配置页签图标 --> 10 <link rel="icon" href="<%= BASE_URL %>favicon.ico"> 11 <!-- 引入第三方样式 --> 12 <link rel="stylesheet" href="<%= BASE_URL %>css/bootstrap.css"> 13 <!-- 配置网页标题 --> 14 <title>硅谷系统</title> 15 </head> 16 <body> 17 <!-- 当浏览器不支持js时noscript中的元素就会被渲染 --> 18 <noscript> 19 <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> 20 </noscript> 21 <!-- 容器 --> 22 <div id="app"></div> 23 <!-- built files will be auto injected --> 24 </body> 25 </html>index.html
vue.config.js 配置文件
1. 使用vue inspect > output.js可以查看到Vue脚手架的默认配置。 2. 使用vue.config.js可以对脚手架进行个性化定制，详情见：https://cli.vuejs.org/zh
1 module.exports = {
2 pages: {
3 index: {
4 //入口
5 entry: 'src/main.js',
6 },
7 },
8 lintOnSave:false, //关闭语法检查
9 //开启代理服务器（方式一）
10 /* devServer: {
11 proxy: 'http://localhost:5000'
12 }, */
13 //开启代理服务器（方式二）
14 devServer: {
15 proxy: {
16 '/atguigu': {
17 target: 'http://localhost:5000',
18 pathRewrite:{'^/atguigu':''},
19 // ws: true, //用于支持websocket
20 // changeOrigin: true //用于控制请求头中的host值
21 },
22 '/demo': {
23 target: 'http://localhost:5001',
24 pathRewrite:{'^/demo':''},
25 // ws: true, //用于支持websocket
26 // changeOrigin: true //用于控制请求头中的host值
27 }
28 }
29 }
30 }
vue.config.js
babel.config.js
1 module.exports = {
2 presets: [
3 '@vue/cli-plugin-babel/preset',
4 ["@babel/preset-env", { "modules": false }],
5 ],
6 plugins:[
7 [
8 "component",
9 {
10 "libraryName": "element-ui",
11 "styleLibraryName": "theme-chalk"
12 }
13 ]
14 ]
15 }
babel.config.js
标签：分析,vue,App,js,Vue,组件,脚手架,config 来源： https://www.cnblogs.com/zhuangdd/p/16215624.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。