Vue入门(二)
这一节我们将通过阅读Demo项目的源代码,了解Vue项目的基本构成。
只有了解了这些,我们才有能力编写自己的案例。
之后我们通过命令“npm run build”,构建Vue项目,观察生成的构建结果,更深入地了解项目。
一、Vue项目的基本构成
1. src目录
开发者编写的代码都放在src目录下。
Demo项目的src目录结构如下图所示:
各文件和目录说明如下:
- main.js文件:App首页的主要文件,根目录下的index.html文件只是一个空壳,其内容都由这个JS文件动态填充生成。
- App.vue文件:App首页的主要文件,App组件是整个App中最重要的一个组件,或者说是根组件,由main.js负责渲染,并填充入index.html中。
- assets目录:存放资源文件,如样式表、图片、音频、视频等。
- components目录:存放其它组件。
- router目录:存放路由配置。
2. main.js
代码如下:
- import Vue from 'vue' // 导入vue模块
- import App from './App' // 导入App.vue,.vue可以省略
- import router from './router' // 导入router目录下的index.js文件,省略文件名时,会自动查找index.js
- Vue.config.productionTip = false // 阻止Vue在启动时生成生产提示
- new Vue({ // 实例化Vue对象
- el: '#app', // el用于指定Vue组件被加载到哪个HTML元素中
- router, // 指定路由
- components: { App }, // 指定组件
- template: '<App/>' // 模板默认替换挂载元素。如果replace选项为false,模板将插入挂载元素内。
- })
new Vue()时,会把components中指定的组件渲染出来,并填充入el指定的HTML元素中。
3. App.vue
代码如下:
- <template>
- <div id="app">
- <img src="./assets/logo.png">
- <router-view/>
- </div>
- </template>
- <script>
- export default {
- name: "App"
- };
- </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>
一个组件是实现特定功能的可复用的页面模块,例如手机中常见的通讯录,就是一个组件。
一个Vue组件由三部分构成:
- template:模板。模板部分包含组件的HTML代码。
- script:脚本。脚本部分定义组件类的数据和操作。
- style:样式表。样式表部分定义组件的CSS代码。
这里有一个手机中弹出提示(Toast)的组件代码,大家可以看一下:
- <template>
- <transition name="bounce">
- <div class="toast" :class="{'hidden': !visiable}"> <!-- 使用:[属性名]的方式可以设置动态属性 -->
- <i class="message">{{message}}</i> <!-- 使用{{[表达式]}}的方式可以显示组件的数据 -->
- <i class="icon icon-tuichu" @click="closeToast"></i> <!-- 使用@[事件名]的方式可以指定事件的处理方法,方法定义在脚本中 -->
- </div>
- </transition>
- </template>
- <script>
- export default {
- data() { // data:定义组件的数据,即组件内部的变量,注意这里的格式不是“data: {}”,而是函数“data() {}”
- return {
- message: "提示消息",
- visiable: true
- };
- },
- methods: { // methods:定义组件的方法
- closeToast: function() {
- this.close();
- }
- }
- };
- </script>
- <style scoped lang="less">
- @import url("../assets/css/variable.less");
- @import url("../assets/css/public.less");
- /* 省略样式表 */
- </style>
4. router/index.js
- import Vue from 'vue' // 导入vue模块
- import Router from 'vue-router' // 导入vue-router模块
- import HelloWorld from '@/components/HelloWorld' // 导入组件HelloWorld,@指代src目录
- Vue.use(Router) // 使用路由器组件
- export default new Router({ // 创建一个路由器对象
- routes: [ // routes是一张路由表,将路径与组件映射在一起
- {
- path: '/',
- name: 'HelloWorld',
- component: HelloWorld
- }
- ]
- })
二、构建结果
运行“npm run build”,观察dist目录下的构建结果。
1. 构建完成后,就看不到.vue文件了,只有img、css、js等几个目录了。
2. 以组件为单位生成相应的.css和.js文件,例如App.vue,就生成了app.[随机字符].css和app.[随机字符].js。
3. Webpack会把较小的图片编码成BASE64编码,直接写入.js文件中。
4. .js文件是经过压缩处理的,比原来的尺寸小了很多。
由于.js文件经过了压缩处理,所以如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错。因此还为每个文件生成了一个map文件,有了map文件就可以像未加密的代码一样,准确的输出是哪一行哪一列有错了。
如果你不想生成map文件,可以找到src/config/index.js文件,并将productionSourceMap改为false。
5. Vue框架也生成了两个.js文件,一个是vendor.[随机字符].js,一个是manifest.[随机字符].js。可以认为vendor是Vue框架的主体部分,它的尺寸较大,而manifest是Vue框架中易变动的部分,所以把它独立出来,它的尺寸较小。