构建图形教程的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”的支持相对简单。首先，通过命令行安装相关的依赖项：

安装NPM安装节点-sass-save-dev NPM安装sass-loader-save-dev后，您可以通过将样式标签的“lang”属性指定为“SCS”来用这种语言编写样式代码：

Style lang=' scss '作用域/style style src=' http : style . SCS ' lang=' SCS '/style rem布局

如今，为了适应不同尺寸的手机屏幕，大多数手机页面在样式代码中使用rem作为尺寸单位。然而，设计师给出的设计草案仍然是px。所以需要把px转换成rem，可以在大脑中转移，也可以通过工具转移，比如“postss”的插件“postss-px2p 2 rem”。

“postss”是在项目初始化时安装的，因此您可以直接安装“postss-px2xrem”:

NPM install postss-px2rem-save-dev安装完成后，在项目根目录下修改“. postcssrc.js”，添加“postss-px2rem”的配置：

plugins ' : { ' AutoPrefixer ' : { }，' PostCSS-Px2Rem ' 3360 { ' Remint ' : 100 } }“PX值/Remint”为转换后的Remint值，可以根据自己的需要修改“Remint”的值。

但是，一些特殊的px值不需要转换成rem值。此时，特殊注释可以禁止“postss-px rem”来处理该值。例如：

/*不同dpr下的细线*/。g-DPR-1。g-border-1px {边框宽度： 1px！重要；/*no*/}。g-dpr-2。g-border-1px { border-width : 0.5px！重要；/*no*/}Vuex

在单页应用程序开发中，负责管理状态的“Vuex”也是必要的。安装也很简单：

Npm install vuex - save但是，在实际使用时，这样的异常可能会出现在一些较低版本系统的浏览器中：

错误： [vuex] vuex需要此浏览器中的Promise polyfill。

这是因为浏览器不支持“Promise”，所以需要一个“polyfill”。我们可以直接使用“巴别塔-多菲尔”:

NPM安装babel-poly fill-Save“babel-poly fill”会在全局范围内添加ES6新添加的对象和方法，项目中的其他代码不需要显式导入或要求，这意味着“Webpack”不会将其识别为项目的依赖项。因此需要在包装入口处修改“/build/webpack.base.conf.js”并添加“babel-poly ill”:

entry : { app :[' babel-poly fill '，'。/src/main.js']}需要说明的是，在使用“Vue-CLI”初始化项目时，默认安装了“babel-plugin-transform-runtime”，其功能与“babel-poly ill”Modify相同。在根目录下删除这一行：

插件' : ['转换-运行时']然后删除依赖项：

访问路径NPM卸载巴别塔-插件-转换-运行时-保存-开发

当每个小项目实际运行在服务器上时(无论是用于测试、预发布还是生产环境的服务器)，它都通过一级子目录来区分。

这意味着项目中的所有路径都必须添加一层目录(例如，原始访问路径为“http://localhost:8080/home”，现在必须更改为“http://localhost 33608080/project-a/home”)。不要以为这是一件很简单的事情。事实上，有很多事情需要改变。

首先要改变的是“Vue-Router”的基本路径配置：

新路由器({base:'/project-a/'，//基本路径模式3360' history '，route: [{path:'/'，component : home }]})；设置基本路径后，所有与路由相关的路径都是相对基本路径，而不是根目录。

然后是开发服务器的资源发布路径(/config/index.js):

dev : { assets public path : '/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 ":

要求(' webpack-hot-middleware ')(编译器，{log: false，path : '/project-a/_ _ web pack _ hmr ' })，然后修改"/build/dev-client.js ":

需要(' web pack-hot-中间件/客户端？path=_ _ web pack _ hmrdynamicpath=true noinfo=true reload=true’)顺便说一下，以上参数完全是用源代码调试的结果，官网文档中没有详细说明。

经过所有的修改，我们可以发现有5个代码与目录相关，所以在使用特定项目的时候，不需要修改5次吗？很麻烦。在这种情况下，最好的选择是将这部分逻辑写成一个公共函数来调用。新文件"/src/add-dirname.js ":

const DIR _ NAME='/project-a/'；module.exports=function(路径){ return (DIR_NAME路径)。替换(/\/{2，}/g，'/')；};然后改变添加一级子目录涉及的所有代码调用这个函数实现：

这样，如果要修改一级子目录，只需要修改常量“DIR_NAME”的值即可。

公共代码

我们的公共代码分为三种类型：

通用性强的库：包括一些团队成员编写的通用库，不能通过npm安装的通用库等。这与业务无关；

业务逻辑库：与业务相关但与表示层无关的公共代码；

业务组件库：表示层的组件。

它们都位于“/src/public”:

在每个公共代码的文件夹中，特定库或组件的目录结构如下：

/src/公共/组件/img-box

img-box.vue

1.1

这里应该特别提到版本号文件夹。如果对库或组件的修改会导致以前的调用代码不兼容，则不应修改原始文件，而应创建一个新的版本号文件夹，并将新代码和其他资源文件放在这个新文件夹中。这样做的好处是，当更新特定项目的公共代码时，您可以简单地覆盖项目模板的“/src/public”，而不用担心不兼容。

建造

项目模板“webpack”已经配置了构建逻辑。您可以使用一个命令来执行构建：

根据npm run build的默认配置，代码将发布在项目根目录下的“dist”文件夹中。然而，这种简单粗暴的发布方式并不能满足实际需求：

资源文件(图片、CSS、JS等。)应发布到CDN服务器；

资源文件应该通过HTML中完整的URL引用(因为资源文件在CDN的域上)；

不同的环境(测试、预发布、生产)使用不同的域访问。

为了首先解决区分环境的问题，我们向build命令添加一个参数来表示环境：

Npm run build test|pre|prod然后在根目录中创建新的配置文件“conf.json”(为简单起见，仅写入两个环境的配置):

文件内容代表了不同环境下的HTML文件发布路径、资源发布路径和资源访问路径。

接下来，我们将把这些配置连接到“Webpack”的打包配置中。修改“/config/index.js”，在开头添加：

var env=process . argv[2]；//环境参数(从0开始的第二个)var conf=require('./conf ')；//找出对应环境conf . index root=conf . index root[env]的配置；conf . asset root=conf . asset root[env]；conf . assets public path=conf . assets public path[env]；然后修改建筑部分的代码：

build : { index : path . resolve(_ dirname，conf.indexRoot 'index.html ')、assetroot : path . resolve(_ dirname，conf.assetsRoot)，assetpublicatpath : conf . assetpublicatpath }此时运行build命令，就可以将项目发布到“conf.json”指定的路径。

总结

至此，项目模板已经构建完成。其实最重要的一点就是可配置性，否则开发具体项目的人在初始化一个项目的时候，就要换十几个地方，效率会很低。

项目模板的使用

项目模板已经设置好了，但是如何使用呢？有两种常见情况：

初始化一个新项目：克隆或拉取项目模板项目，复制该项目的所有文件(除外)。git "文件夹)添加到新项目的文件夹中，并修改配置以供后续开发。

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

这两种场景都离不开“克隆或拉取”和“复制粘贴”，麻烦又太低。因此，我后来用Node.js编写了一个命令行工具“webapp-cli”来完成这两个任务。

初始化项目的命令是：

Webapp初始化[项目路径]例如：

更新特定文件的webapp init测试命令有：

Web应用程序更新文件globs[项目路径]例如：

webapp update /src/public/**测试工具并没有改变操作模式，而是从手动操作改为编程来为您完成。

以上用Vue.js项目模板构建图文的教程都是边肖分享的内容，希望能给大家一个参考和支持。