本文共 2234 字，大约阅读时间需要 7 分钟。

一,前言

前面使用Vue-cli创建了Vue工程脚手架并启动访问项目 在这个脚手架工程中,具备了Vue项目开发许多工程化的设置 例如:     使用了npm包管理工具及各种其他工具,    如eslint 通过node.js创建一个Vue项目服务供外部访问     使用了工程打包构建工具webpack,添加了工程需要的webpack插件     创建了标准的项目目录,初始化了标准配置文件和多环境项目配置文件 在脚手架工程中有一个简单的Vue演示页面,位于src目录 页面内容位于components目录的Vue组件HelloWorld.vue这一篇我们就介绍Vue的组件化.vue单文件组件

二.vue单文件组件

这部分通过对脚手架工程中的简单组件进行使用说明,对.vue单文件组件进行了解和使用

脚手架工程运行效果:

其中视图显示部分为src/components/HelloWorld.vue单文件组件

HelloWorld.vue组件经简化后如下:

.vue单文件组件文件分为三个部分:

template: 组件的模板Html 可使用是写html的形式声明组件模板,不再需要拼接字符串 script: 主要用于导出组件选项配置, 可在父级(父组件或Vue实例)进行导入 style: 组件的CSS样式 可添加scoped属性,使CSS只对当前组件有效

三,项目运行分析

启动服务后我们可以看到helloWorld页面,这个页面到底是如何构建出来的,进行一下简单分析

1,程序的入口

首先,项目通过webpack进行打包,需要配置一个入口文件 在脚手架工程中,入口文件的配置文件位于build/webpack.base.conf.js (webpack.base.conf.js为dev和prod配置文件公用配置,分别在dev和prod配置中被导入)

入口文件指向了src/main.js,(webpack对项目的打包入口为main.js)

main.js:

import Vue from 'vue'           // 导入vueimport App from './App'         // 导入根组件import router from './router'   // 导入路由Vue.config.productionTip = falsenew Vue({  el: '#app',  router,  components: { App },  template: '
   '})

可以看到,在入口文件main.js中,引入了Vue,根组件App,和路由插件router并在初始化Vue实例时,配置挂载到#app,注册router插件,使用App根组件挂载的#app位于项目跟目录的index.html中

2,index.html

表面上,index.html是一个空的html文档,仅提供了一个挂载点实际并不是这样,这个index.html是作为一个模板存在的,这里涉及到webpack的插件HtmlWebpackPlugin

回到webpack配置build/webpack.dev.conf.js

HtmlWebpackPlugin插件能根据模板生成html,并为生成的html页面添加静态资源引用script标签所以我们看到的index.html并没有引用webpack打包后的静态资源文件

3,根组件App

根组件也是由template,script,style组成template中使用了
   用于路由页面切换(SPA单页面应用)路由配置在src/router/index.js中

4,路由配置src/router/index.js

import Vue from 'vue'import Router from 'vue-router'import HelloWorld from '@/components/HelloWorld'Vue.use(Router)export default new Router({  routes: [    {      path: '/',      name: 'HelloWorld',      component: HelloWorld    }  ]})

src/router/index.js最终导出了一个配置了路由的路由器实例src/router/index.js在入口文件main中被引入,并在实例化vue时注入由于默认路径/使用组件HelloWorld进行显示(
   )所以访问http://localhost:8080/#/时,现实的视图是HelloWorld组件样式

四,结尾

在之前使用Vue-cli创建了脚手架并运行后这一篇对脚手架工程的运行做了简单的分析说明脚手架中涉及到的知识点非常多,目前介绍的内容只是为了简单理解工程的运行原理例如,webpack对CSS的处理使用了css-loader等Loader转换器,编译.vue文件时,使用了vue-loader对