目的：建立开发、测试、部署的自动化环境
脚手架 vue-cli
vue-cli 的存在将项目环境的初始化工作和复杂度降到了最低
# 更新NPM
$ npm i npm -g
# 安装Vue-cli
$ npm i vue-cli -g
指令解析
- 用法：
vue<命令> [选项] - 命令：
-
init从指定模板中生成新项目 -
list罗列出所有可用的官方模板 -
help [cmd]显示命令的帮助文档
-
- 选项
-
-h,--help输出用法信息 -
--V,--version输出版本号
-
官方模板
$ vue list
Available official templates:
★ browserify - 拥有高级的Browserify+vueify，用于高级开发。
★ browserify-simple - 拥有基础功能的Browserify+vueify，用于快速原型开发。
★ pwa - PWA template for vue-cli based on the webpack template
★ simple - 用于单页应用开发的最小配置
★ webpack - 拥有高级功能的webpack+vue-loader，用于正式开发。
★ webpack-simple - 拥有基础功能的webpack + vue-loader，用于快速原型开发。
创建项目
$ vue init webpack projectName
深入工程模板
webpack-simple 模板
webpack-simple 仅配置了 Babel 和 Vue 编译器，src 目录存放 Vue 代码源程序，五个模板构建出来的src目录都是一样的。只是在 webpack 模板中多了 components 目录，用于存放共用组件。目录结构和文件的组织应在开发前就进行约定。
规范约定
- 公共组件
components、指令directives、过滤器filters将分别存放于src目录下 - 以使用场景命名
Vue的页面文件 - 当页面文件具有私有组件、指令、过滤器时，建立与页面同名的目录，页面文件更名为
index.vue，将页面与相关的依赖文件放在一起。 - 目录由全小写的名次、动名词、分词命名，两个以上次组成以
-分割。 - Vue文件统一以大驼峰命名，仅入口文件
index.vue采用小写。 - 测试文件一律以测试目标文件名
.spec.js命名 - 资源文件一律以小写字符命名，两个以上的词组成以
-分割。
约定
项目目录
webpack 模板
根目录
-
build存放用于编译用的webpack配置和相关辅助工具代码 -
config存放三大环境配置文件，用于设定环境变量和必要的路径信息。 -
test存放E2E测试与单元测试文件以及相关的配置文件 -
static存放项目所需要的其他静态资源文件 -
dist存放运行npm run build指令后的生产环境输出文件，可直接部署到服务器对应的静态资源目录内，该文件夹只有在运行build之后才会生效。
构建工具
开发、测试、生产三大运行环境都需要进行构建，针对不同环境要求，配置不同。
编译开发环境
# 在开发环境下加载运行Vue项目
$ cd projectName
$ npm run dev
该指令的配置是在package.json的script属性中设置的，实质是由npm来引导执行入口程序dev-server.js完成加载过程。
{
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
},
}
加载过程
- 加载环境变量
从config目录加载index.js和dev.env.js模块，准备开发调试环境所必须的目录和全局变量。
加载环境变量
- 合并webpack配置
在 build 目录下有三个 webpack 的配置文件
webpack配置文件
-
webpack.base.conf.js公用基本webpack配置 -
webpack.dev.conf.js开发环境专用的webpack配置 -
webpack.prod.conf.js生产环境专用webpack配置
使用webpack-merge的包来进行两个webpack配置之间的合并，此环境是通过将这个包将webpack.base.conf.js和webpack.dev.conf.js合并成最终的webpack配置。
- 配置热加载
热加载启动后当开发环境被启动并进入调试模式后，一旦修改任何源代码，浏览器中对应内容会被自动刷新，而无需手工对浏览器进行刷新。
上阶段合并的webpack配置也是通过此环境被动态加载的，当代码文件发生变化，热加载就会启动webpack进行重新编译，然后将最新的编译文件重新加载到浏览器中。
- 配置代理服务器
为代码增加一个模拟的服务端，可在无后盾程序支持时，直接模拟远程服务器执行请求的效果。
- 配置静态资源
将图片、字体、样式表、编译后的JS脚本等，生成对应的印记（Footprint）并存放到由开发服务器托管的static虚目录中，使得浏览器正常访问这些资源。每个生成的文件印记是一些哈希代码，当文件内容发生变化时，哈希代码会发生改变。使用印记是将静态文件发布到CDN或进行离线缓冲时通知浏览器文件是否发生改变的重要依据。
- 加载开发服务器
启动一个Express的Web服务器，将各个环境中配置好的模块进行加载，并程序能通过浏览器进行访问。
编译生产环境
$ npm run build
生产环境的构建，首先对必要资源文件进行打包加上印记，然后对脚本进行编译、压缩、包大小分割。
工程配置
webpack是一个模块打包的工具，作用是把相互依赖的模块处理成静态资源。
webpack模块打包
webpack的目标是
- 将依赖树按需分割
- 将初始加载时间控制在较低水平
- 每个静态资源都应成为一个模块
- 将第三方库继承到项目中形成一个模块
- 定制模块打包器的每个部分
- 适用于大型项目
webpack的特点
- 代码分割
在webpack的依赖树中有2中类型的依赖：同步依赖、异步依赖。异步依赖会成为一个代码分割点，并组成新代码块。在代码块组成的树被优化之后，每个代码块都会保存在一个单独的文件中。
- 加载器
webpack 原生只能处理js，加载器的作用是把其他代码转换成js代码，如此一来所有种类的代码都能组成一个模块。也就是说，在代码内可通过import将webpack打包的资源以模块的方式引入到程序中。
vue中常用加载器，以NPM库形式提供。
-
vue-loader加载与编译*.vue文件 -
vue-style-loader加载*.vue文件中的样式 -
style-loader将样式插入到页面的<style>标签内 -
css-loader加载*.css样式表文件 -
less-loader加载与编译*.less文件 -
babel-loader将ES6编译成浏览器兼容的ES5 -
file-loader直接加载文件 -
url-loader加载URL指定的文件，多用于字体和图片的加载。 -
json-loader加载*.json文件为JS实例 -
智能解析
webpack智能解析器能处理第三方库，允许依赖中出现表达式。
require("./components/"+name+".vue")
- 插件系统
基本用法
webpack 打包依赖配置文件webpack.config.js，此配置文件可以指定所有在源代码编译过程中的工作。
- 样式表的引用
希望某些页面或组件在应用时才自动加载特定的样式
import Vue from 'vue'
//引用指定的样式源文件
import './app/assets/less/dark.less'
export default {
}
在 webpack 的配置中加入 less-loader，webpack在打包是会自动将less转换为CSS，并将CSS动态代码生成到JS文件中。当Vue组件被加载到页面并实例化后，将在DOM内插入此特定行内样式<style>以实现动态样式的应用。
对于*.css同样是适用，如导入第三方库中必需的样式表。
import 'uikit/dist/css/components/tabs.css'
- 字体的引用
以前在样式表中先定义好字体样式并指定加载位置，然后页面引用样式表。使用webpack后，在配置文件内加入一个url-loader。
{
test:/\.(woff2?|eot|ttf|otf)(\?,*)/,
loader:'url'
}
-
使用别名取代路径引用
-
配置多入口程序
前后台需要多个与main.js类似的程序入口
#build/webpack.base.conf.js
module.exports = {
entry:{
app:'./src/main.js',
admin:'./src/admin.js'
}
}
vue-cli的webpack模板使用HtmlWebpackPlugin插件，生成HTML入口页面并自动将生成后的JS文件和CSS文件的引用地址写入到页面内人<script>标签中。这就需要在build/webpack.dev.config.js文件内的plugins配置项内多配置一个HtmlWebpackPlugin插件，用于生成admin.html入口页。
# build/webpack.dev.config.js
plugins:[
]
网友评论