用vue-cli搭建项目,vue-cli2创建项目

　　本文主要介绍一组基于Vue-cli支持多个项目的代码，帮助大家更好的理解和学习使用Vue框架。感兴趣的朋友可以了解一下。

应用场景

　　在终端业务中，客户或多或少会要求对相同的产品进行一些定制。从皮肤、图片，到一些小的功能差异。

　　前端总是在前端，这是需要改变的。如果变化不大，拉一个分支会增加维护的副本，分支会太多。如果后备箱有问题，相当于抄了N份，味道应该不会太酸。那么，一套代码可以支持多个项目吗？

　　前段时间接到一个需求，技术选型是VUE，用vue-cli搭建。一套代码需要支持10个以上的客户，每个客户在皮肤和功能上有一些小的区别，主要流程大致相同。在这个场景中研究了解决方案。

思路

　　整体思路是模块化的，然后根据编译时输入的命令直接组装不同的模块，封装出我们需要的页面。

　　这个地方有两个问题：

　　1.如何划分页面，控制组件的粒度？

　　2.如何区分编制？

项目结构

　　同一个页面有相同的部分，也有不同的部分。Vue的组件化思想很容易让我们想到把页面拆分成组件，然后把常见的提取出来，进行不同的处理。

项目总体结构

　　建设

　　构建结构主要包括webpack的一些脚本配置。

　　配置

　　Config文件主要与项目配置相关。我们通常使用它来配置监控端口，打包输出路径，并在端口冲突时对其进行命名。

　　科学研究委员会

　　源代码文件。

　　资产

　　静态资源，通常是图片、样式等。

　　较少的

　　样式文件，这里由主题处理。

　　页

　　页面文件

　　路由器

　　途径

　　跑龙套

　　工具类别

　　成分

　　文件夹是每个项目的独立组件。组件目录中的组件是公共组件。

　　静电

　　静态资源，不会被webpack编译。一般来说，把外部参考文件。

webpack打包配置

如何差异化编译？

　　1.cross-env使用环境变量。在编译阶段，根据传入的变量编译不同的组件。

　　首先需要更改package.json的文件。

　　脚本:{

　　 dev:GX : cross-ENV BRANCH _ ENV=GX node build/dev-server . js ，

　　build:GX : cross-ENV BRANCH _ ENV=GX node build/build . js

　　这时候我们在编译的时候就可以输入相应的命令来传入相应的环境变量。

　　NPM运行开发：GX将在BRANCH_ENV=gx中被传递。

　　2.将config/prod.env.js注入这个环境变量。

　　模块.导出={

　　NODE_ENV:“生产”，

　　API_PATH: ，

　　BRANCH _ ENV:JSON . stringify(process . ENV . BRANCH _ ENV) base ，

　　ignoreCsrfToken:“”false“”

　　}

　　3 .网络包

　　解决：{

　　扩展名：[ ，。js ，。vue ，。json]，

　　fallback: [path.join(__dirname，./node_modules)]，

　　别名：{

　　vue$: vue/dist/vue.common.js ，

　　 src: path.resolve(__dirname，./src )，

　　 assets: path.resolve(__dirname，./src/assets/images/ process . ENV . branch _ ENV)，

　　 components :path . resolve(_ _ dirname，./src/components )，

　　 components dif :path . resolve(_ _ dirname，./src/components/ process . ENV . branch _ ENV)，

　　}

　　可以看出，我们在引入别名时使用了编译命令注入的环境变量。例如，假设我输入的编译命令是

　　npm运行版本：gx

　　此时此刻

　　 assets: path.resolve(__dirname，./src/assets/images/ process . ENV . branch _ ENV)

　　//相当于

　　 assets: path.resolve(__dirname，./src/assets/images/gx )

页面引用

1.图片引用

　　 img class= icon-arrow src= ~ assets/arrow . png

　　//根据编译命令。图片参考src/assets/images/GX/arrow.png

　　背景：url(~assets/btn_1.png)无重复；

　　Ps:使用别名时记得加~号。

2.组件引用

　　//通用组件

　　从“组件/规则标题”导入规则标题

　　//差异化组件

　　从“组件定义/规则内容”导入规则内容

总结

　　总之，核心思想是跟进传入编译命令的环境变量，利用环境变量和别名的配置来区分打包。更难的是如何控制组件的粒度，如何拆分组件，需要根据不同的需求进行定制。

　　以上是基于Vue-cli的一组支持多个项目的代码细节。关于一组支持Vue-cli多个项目的代码的更多信息，请关注我们的其他相关文章！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。

目录