vue的脚手架分析
脚手架文件结构
├── 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 })
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>
主页面 -- 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>
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 }
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 }
