Vue.js项目模板搭建图文教程


Posted in Javascript onSeptember 20, 2017

前言

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

项目划分

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

Vue.js项目模板搭建图文教程

项目模板考虑到我们团队刚开始使用「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

访问路径

每个小项目真正在服务器(不管是测试、预发布还是生产环境的服务器)上运行的时候,是通过一级子目录去区分的。

Vue.js项目模板搭建图文教程

这就意味着,项目中的所有路径都要加上一层目录(比如原访问路径为「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, '/');
};

然后把刚才涉及添加一级子目录的代码全部改成调用该函数来实现:

Vue.js项目模板搭建图文教程

这样一来,如果要修改一级子目录,只需要修改常量「DIR_NAME」的值就可以了。

公共代码

我们的公共代码分为三种:

通用性较强的库 :包括团队成员编写的一些通用库、无法通过npm安装的通用库等,跟业务无关;

业务逻辑库 :跟业务有关,但是跟表现层无关的公共代码;

业务组件库 :表现层的组件。

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

Vue.js项目模板搭建图文教程

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

/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」(简单起见,只写了两种环境的配置):

Vue.js项目模板搭建图文教程

文件内容表示的分别是不同环境下的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

这个工具并没有改变操作方式,只是由人工操作变成程序代劳。

以上这篇Vue.js项目模板搭建图文教程就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 1.0.4 - New Wave Javascript(js源文件)
Jan 15 Javascript
javascript 播放器 控制
Jan 22 Javascript
JavaScript和JQuery实用代码片段(一)
Apr 07 Javascript
javascript实现简单的分页特效
Aug 12 Javascript
JavaScript实现获取某个元素相邻兄弟节点的prev与next方法
Jan 25 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
Aug 10 Javascript
js变量提升深入理解
Sep 16 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
VUE元素的隐藏和显示(v-show指令)
Jun 23 Javascript
js实现倒计时器自定义时间和暂停
Feb 25 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 Javascript
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
从对象列表中获取一个对象的方法,依据关键字和值
Sep 20 #Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
Sep 20 #Javascript
jquery 一键复制到剪切板的实例
Sep 20 #jQuery
angularjs利用directive实现移动端自定义软键盘的示例
Sep 20 #Javascript
集合Bootstrap自定义confirm提示效果
Sep 19 #Javascript
微信小程序使用Socket的实例
Sep 19 #Javascript
vue基于Element构建自定义树的示例代码
Sep 19 #Javascript
You might like
PHP获取指定函数定义在哪个文件中以及其所在的行号实例
2014/05/08 PHP
CentOS 上搭建 PHP7 开发测试环境
2017/02/26 PHP
PHP利用递归函数实现无限级分类的方法
2019/03/22 PHP
Javascript中的常见排序算法
2007/03/27 Javascript
一个可以随意添加多个序列的tag函数
2009/07/21 Javascript
javascript EXCEL 操作类代码
2009/07/30 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
2010/05/15 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
JQuery记住用户名密码实现下次自动登录功能
2015/04/27 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
Python中的choice()方法使用详解
2015/05/15 Python
python列表操作之extend和append的区别实例分析
2015/07/28 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
PyQt5每天必学之进度条效果
2018/04/19 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
python 判断矩阵中每行非零个数的方法
2019/01/26 Python
PyTorch中反卷积的用法详解
2019/12/30 Python
pytorch模型存储的2种实现方法
2020/02/14 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
Appium+Python实现简单的自动化登录测试的实现
2021/01/26 Python
css3 伪元素和伪类选择器详解
2014/09/04 HTML / CSS
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
比较基础的php面试题及答案-编程题
2012/10/14 面试题
组工干部演讲稿
2014/09/02 职场文书
贷款收入证明范本
2015/06/12 职场文书