Node.jsVue.js项目模板搭建

前言

从当年(前年)年底起,我们公司开端引入「Vue.js」开发活动端的产品。作为协会的首创者,小编的主要职分正是设计 全体的架构 。一个脍炙人口的框架结构必定是具备丰盛的支出经历后才能搭建出来的。纵然笔者有多年的前端开发经验,但就「Vue.js」来说,如故是个新手。所幸「Vue.js」有三个配套工具「Vue-CLI」,它提供了某些比较成熟的门类模板,非常的大程度上跌落了左边的难度。可是,很多切实的题材或然要自身想想和消除的。

项目划分

大家合营社的H5产品多数是嵌套在手提式有线电电话机客户端里面包车型客车页面。每一个品种的效应都比较独立,而且规模极小。那样一来,既能够让那些小项目分别为政,也得以把它们集中停放三个大品种中管理。各自的利害如下:

Node.js 1

项目模板考虑到大家团队刚开端运用「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

访问路径

各类小品种实在在服务器(不管是测试、预宣布依然生育条件的服务器)上运营的时候,是通过超级子目录去分其他。

Node.js 2

那就表示,项目中的全部路线都要添加一层目录(比如原访问路径为「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处,具体品种采纳的时候岂不是要改肆回?相当费劲。那种情景下,把那部分逻辑写成一个公共函数去调用是最佳的挑三拣四。新建文件「 /src/add-dirname.js 」:

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

接下来把刚刚事关添加一流子目录的代码全体制改良成调用该函数来落到实处:

Node.js 3

那样一来,假若要修改超级子目录,只需求修改常量「DI福睿斯_NAME」的值就足以了。

集体代码

咱俩的共用代码分为二种:

  • 通用性较强的库 :包蕴组织成员编写的片段通用库、不能通过npm安装的通用库等,跟工作毫无干系;

  • 事务逻辑库 :跟工作有关,不过跟表现层无关的国有代码;

  • 作业组件库 :表现层的组件。

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

Node.js 4

在每个集体代码的文件夹内,具体某一个库只怕零部件的目录结构如下:

  • /src/public/components/img-box

  • img-box.vue

  • 1.1

此间要专门提一下的是 版本号 这一层文件夹。如若对库大概零部件的改动会造成以前的调用代码不般配,就不应有修改原著件,而是新建3个版本号文件夹,把新的代码以及任何的财富文件都放置这一个新文件夹中。那样做的益处是,具体的系列要更新公共代码时,间接把项目模板的「/src/public」覆盖过去就行,不用担心不相同盟。

构建

「webpack」那些类型模板已经陈设好构建的逻辑。通过八个下令就足以实施营造:

npm run build

听闻私下认可配置,代码会被公布到花色根目录下的「dist」文件夹内。然则,那样总结狂暴的昭示办法并不可能满足实际必要:

  • 财富文件(图片、CSS、JS等)要发布到 CDN服务器 ;

  • HTML中要因此总体的URubiconL引用财富文件(因为财富文件在CDN的域上);

  • 决不的环境(测试、预公布、生产)使用不一致的域访问。

先消除区分环境的标题,我们在营造命令中新增多个参数以代表环境:

npm run build <test|pre|prod>

下一场在根目录下新建3个配备文件「conf.json」(简单起见,只写了二种环境的布置):

Node.js 5

文本内容表示的各自是见仁见智条件下的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,大家一同学前端!