标签：npm vue run vueCli3 js 文件夹 端多 脚手架 pages

Vue Multiple Pages

基于vue-cli3.0 + webpack@4.28.4的多页脚手架

项目地址：点击此处

线上demo：点击此链接

编译速度与热跟新速度要优于webpack2.0、3.0，但相应的消耗内存变大，在node中出现内存溢出现象，如页面过多，使用

npm run fix-memory-limit

再进行

npm run dev

Project setup

npm install

Compiles and hot-reloads for development

npm run dev

Compiles and minifies for production

npm run build:dev  //打包开发环境
npm run build:devtest //打包开发测试环境
npm run build:test //打包测试环境
npm run build // 打包正式环境

在config里配置不同的打包环境使用不同的api地址等。

添加了移动端相关工具如 mint-ui、300s点击延迟、rem、公共头部和底部、less、store、pages/public_app.js，以及微信签名和请求的封装等

|-- dist                             // 打包目录
|-- src                              // 源码目录
|   |-- components                   // 全局组件
|   |-- utils                        // 工具函数。
|       |-- arrMethods.js            // 数组函数
|       |-- back.js                  // 返回事件
|       |-- request.js               // 请求封装
|       |-- changeUrl.js                // 页面跳转
|       |-- eleMethods.js            // dom方法
|       |-- time_slot_change.js      // 时间方法
|   |-- pages                        // 页面视图
|       |-- home                     // 首页模块文件夹
|           |-- index                // 首页文件夹
|               |-- index.vue        // 首页模板文件
|               |-- index.js         // 首页js文件
|           |-- home1                // 首页内页文件夹
|               |-- home1.vue        // 首页内页模板文件
|               |-- home1.js         // 首页内页js文件
|       |-- discover                 // 发现模块文件夹
|           |-- discover             // 发现文件夹
|               |-- discover.vue     // 发现模板文件
|               |-- discover.js      // 发现js文件
|       |-- public_app.js            // 公共的js，可以引公共的css,vue ui库等
|-- .gitignore                       // 忽略的文件
|-- page.config.js                   // 使用node读取pages文件夹下的文件夹配置到vue cli3
|-- vue.config.js                    // vue cli 配置
|-- README.md                        // 说明
|-- package.json                     // 资源包

说明

• 在css/common.less里重置样式。
• 添加了axios请求库，并做了简单的拦截。
• 添加了fastclick解决移动端300ms点击延迟。
• 已添加mint-ui库，想要添加自己 UI库,在pages/public_app.js引用即可。
• 添加rem适配移动端，设置的设计稿宽度为750，1rem=30px，可在statics/js/public.js自行修改。
• 添加了vue-lazyload图片懒加载，在pages/public_app.js中查看
• 添加页面请在pages文件夹下新建目录，在里面放置js和.vue（建议复制已有的文件夹修改名字进行开发）。

注意

　　由于cnpm与npm的版本有差异性，可能出现使用cnpm安装依赖无法运行项目的情况，最好使用npm安装

标签：npm,vue,run,vueCli3,js,文件夹,端多,脚手架,pages
来源： https://www.cnblogs.com/linfblog/p/12148044.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。