Vue.js项目模板搭建

前言

从今年（2017年）年初起，咱们团队开始引入「Vue.js」开发移动端的产品。做为团队的领头人，个人首要任务就是设计 总体的架构 。一个良好的架构一定是具有丰富的开发经验后才能搭建出来的。虽然我有多年的前端开发经验，但就「Vue.js」来讲，仍然是个新手。所幸「Vue.js」有一个配套工具「Vue-CLI」，它提供了一些比较成熟的项目模板，很大程度上下降了上手的难度。然而，不少具体的问题仍是要本身思考和解决的。

项目划分

咱们公司的H5产品大部分是嵌套在手机客户端里面的页面。每一个项目的功能都比较独立，并且规模不大。这样一来，既可让这些小项目各自为政，也能够把它们集中放到一个大项目中管理。各自的优缺点以下：

项目模板考虑到咱们团队刚开始使用「Vue.js」，须要逐步摸索出合适的架构。若是作成一个大项目，一旦架构要调整，极可能会伤筋动骨。因此最终的选择是 划分红多个小项目 。

虽然划分红多个小项目了，可是这些小项目也要保持一致的架构和公共代码。说白了，就是要根据业务状况搭建本身的项目模板，全部具体的项目都在这个模板的基础上开发。下面就介绍一下咱们团队的项目模板的搭建过程。

初始化

项目模板自己也是一个项目，因此也经过「Vue-CLI」来初始化（项目名为「webapp-public」）：

vue init webpack webapp-public

这里选用的是「webpack」模板，由于功能比较齐全。初始化的过程当中要注意：

• 安装「Vue-Router」以支持单页应用；

• 安装「ESLint」以统一编码规范。

SASS

安装「SASS」的支持比较简单，先经过命令行安装相关依赖：

npm install node-sass --save-devnpm install sass-loader --save-dev

装好后，只要指定style标签的「lang」属性为「scss」，就能够用该语言来编写样式代码了：

<style lang="scss" scoped></style><style src="style.scss" lang="scss"></style>

REM布局

现在移动端的页面为了适应不一样尺寸的手机屏幕，大多都在样式代码中使用rem做为尺寸单位。然而，设计师给的设计稿仍是以px为单位的。这就须要把px转换为rem，这个转换能够在脑子里面转，也能够经过工具去转，好比「PostCSS」的插件「 postcss-px2rem 」。

初始化项目的时候，「PostCSS」就已经装上了，因此直接安装「postcss-px2rem」便可：

npm install postcss-px2rem --save-dev

装好后还要修改项目根目录下的「.postcssrc.js」，增长「postcss-px2rem」的配置：

"plugins": { 
 "autoprefixer": {}, 
 "postcss-px2rem": { "remUnit": 100 }
}

「px值/remUnit」即为转换出来的rem值，能够根据自身须要修改「remUnit」的值。

然而，有些特殊的px值是不须要转换成rem值的，这时候能够经过特殊注释禁止「postcss-px2rem」去处理这个值。例如：

/* 不一样dpr下的细线 */
.g-dpr-1 .g-border-1px { 
 border-width: 1px !important; /*no*/
 }
 .g-dpr-2 .g-border-1px { 
 border-width: 0.5px !important; /*no*/
 }

Vuex

在单页应用开发中，负责管理状态的「Vuex」也是必备的。安装也很是简单：

npm install vuex --save

然而，真正使用的时候，在一些 低版本系统的浏览器 中，可能会出现这样的异常：

Error: [vuex] vuex requires a Promise polyfill in this browser.

这是由于浏览器不支持「Promise」，这时候就须要一个「polyfill」。咱们能够直接用「babel-polyfill」：

npm install babel-polyfill --save

「babel-polyfill」会在 全局做用域 添加ES6新增的对象和方法，项目中的其余代码并不须要显式地引入（import或者require）它，这就意味着「Webpack」不会把它识别为项目的依赖。因此还要修改「/build/webpack.base.conf.js」，在打包入口处增长「babel-polyfill」：

entry: { 
 app: ['babel-polyfill', './src/main.js']
}

另外要提一下的是，使用「Vue-CLI」初始化项目的时候默认安装了「 babel-plugin-transform-runtime 」，而它的做用跟「babel-polyfill」是重复的，因此能够移除前者。修改根目录下的「.babelrc」，移除这一行：

"plugins": ["transform-runtime"]

而后删除依赖便可：

npm uninstall babel-plugin-transform-runtime --save-dev

访问路径

每一个小项目真正在服务器（不论是测试、预发布仍是生产环境的服务器）上运行的时候，是经过一级子目录去区分的。

这就意味着，项目中的全部路径都要加上一层目录（好比原访问路径为「http://localhost:8080/home」，如今就得改为「http://localhost:8080/project-a/home」）。千万别觉得这是很简单的事情，实际上要改的地方是不少的。

首先要改的是「Vue-Router」的 基路径 配置：

new Router({ 
 base: '/project-a/', // 基路径
 mode: 'history', 
 routes: [
 { path: '/', component: Home }
]
});

设置基路径后，跟路由相关的全部路径都是相对基路径，而不是根目录。

而后是开发服务器的 资源发布路径 （/config/index.js）：

dev: { assetsPublicPath: '/project-a/' }

对应地还要修改「/build/dev-server.js」的两处地方，否则访问的时候就会404：

require('connect-history-api-fallback')({ 
 // 默认为"/index.html"，由于资源发布路径改了，因此这里也要对应上
 index: '/project-a/index.html'
 })

// 运行项目后默认打开的页面地址
var uri = 'http://localhost:' + port + '/project-a/'

最后还要修改 Webpack热更新的检测路径 。先修改「/build/dev-server.js」：

require('webpack-hot-middleware')(compiler, { 
 log: false, 
 path: '/project-a/__webpack_hmr'
 })

而后修改「/build/dev-client.js」：

require('webpack-hot-middleware/client?path=__webpack_hmr&dynamicPublicPath=true&noInfo=true&reload=true')

顺带一提，上面的这堆参数彻底是用源代码调试的结果，官网文档并无详细说明。

所有改完以后能够发现，跟目录有关的代码有5处，具体项目使用的时候岂不是要改5次？很是麻烦。这种状况下，把这部分逻辑写成一个公共函数去调用是最好的选择。新建文件「 /src/add-dirname.js 」：

const DIR_NAME = '/project-a/';
module.exports = function(path) { 
 return (DIR_NAME + path).replace(/\/{2,}/g, '/');
};

而后把刚才涉及添加一级子目录的代码所有改为调用该函数来实现：

这样一来，若是要修改一级子目录，只须要修改常量「DIR_NAME」的值就能够了。

公共代码

咱们的公共代码分为三种：

• 通用性较强的库 ：包括团队成员编写的一些通用库、没法经过npm安装的通用库等，跟业务无关；

• 业务逻辑库 ：跟业务有关，可是跟表现层无关的公共代码；

• 业务组件库 ：表现层的组件。

它们都位于「/src/public」：

在每一种公共代码的文件夹内，具体某一个库或者组件的目录结构以下：

• /src/public/components/img-box

• img-box.vue

• 1.1

这里要特别提一下的是 版本号 这一层文件夹。若是对库或者组件的修改会形成之前的调用代码不兼容，就不该该修改原文件，而是新建一个版本号文件夹，把新的代码以及其他的资源文件都放到这个新文件夹中。这样作的好处是，具体的项目要更新公共代码时，直接把项目模板的「/src/public」覆盖过去就行，不用担忧不兼容。

构建

「webpack」这个项目模板已经配置好构建的逻辑。经过一个命令就能够执行构建：

npm run build

根据默认配置，代码会被发布到项目根目录下的「dist」文件夹内。然而，这样简单粗暴的发布方式并不能知足实际需求：

• 资源文件（图片、CSS、JS等）要发布到 CDN服务器 ；

• HTML中要经过完整的URL引用资源文件（由于资源文件在CDN的域上）；

• 不用的环境（测试、预发布、生产）使用不一样的域访问。

先解决区分环境的问题，咱们在构建命令中新增一个参数以表示环境：

npm run build <test|pre|prod>

而后在根目录下新建一个配置文件「conf.json」（简单起见，只写了两种环境的配置）：

文件内容表示的分别是不一样环境下的HTML文件发布路径、资源发布路径以及资源访问路径。

接下来就要把这些配置接入到「Webpack」的打包配置中。修改「/config/index.js」，先在开头加上：

var env = process.argv[2]; // 环境参数（从0开始的第二个）
var conf = require('../conf');
// 找出对应环境的配置conf.indexRoot = conf.indexRoots[env];
conf.assetsRoot = conf.assetsRoots[env];
conf.assetsPublicPath = conf.assetsPublicPaths[env];

而后修改构建部分的代码：

build: { 
 index: path.resolve(__dirname, conf.indexRoot + 'index.html'),
 assetsRoot: path.resolve(__dirname, conf.assetsRoot),
 assetsPublicPath: conf.assetsPublicPath
}

此时运行构建命令，就能够把项目发布到「conf.json」指定的路径中。

小结

至此，项目模板搭建完毕。其实最重要的一点就是 可配置化 ，不然，开发具体项目的人初始化一个项目还要改十几个地方，效率就很低了。

项目模板的使用

项目模板已经搭建好了，可是怎么用呢？有两种经常使用场景：

• 初始化新项目 ：克隆或拉取项目模板项目，复制该项目的全部文件（除了「.git」文件夹）到新项目的文件夹，修改配置后进行后续开发。

• 更新公共代码 ：克隆或拉取项目模板项目，复制要更新的代码到目标项目的对应路径。

两种场景都离不开「克隆或拉取」、「复制和粘贴」，这种作法一是麻烦，二是逼格过低。因此后来我用Node.js写了一个命令行工具「webapp-cli」来完成这两项工做。

初始化项目的命令为：

webapp init [projectPath]

例如：

webapp init test

更新特定文件的命令为：

webapp update <fileGlobs> [projectPath]

例如：

webapp update /src/public/** test

这个工具并无改变操做方式，只是由人工操做变成程序代劳。

 

 

>

学习前端的同窗注意了！！！

学习过程当中遇到什么问题或者想获取学习资源的话，欢迎加入前端学习交流群461593224，咱们一块儿学前端！