一 环境安装:
1 安装nodejs http://nodejs.cn/download/下载安装
2 安装git https://git-for-windows.github.io/下载安装
3 设置npm全局路径 NodeJs下建立"node_global"及"node_cache"两个文件夹
npm config set cache "D:\nodejs\node_cache" npm config set prefix "D:\nodejs\node_global"
4 最后在nodejs的安装目录中找到node_modules\npm.npmrc文件 修改如下即可:
prefix = D:\nodejs\node_global cache = D:\nodejs\node_global 5 设置node环境变量
变量名:NODE_PATH
值:D:\nodejs\node_global\node_modules
变量名:PATH
值:D:\nodejs\node_global
5 设置淘宝镜像:
npm config set registry " https://registry.npm.taobao.org "
npm install -g cnpm --registry=https://registry.npm.taobao.org
2.0的主要功能
全局统一使用的模块util.js库
支持字体图标
构建时,增加对css打包的支持
提取公共模块
多页面可使用vue-router2路由
可自定义页面模块名,例如 http:// localhost:8091/views/home/list.html,views就是我们线上的模块名,1.0版只能固定的
支持二级目录,便于归类,1.0版本暂时仅支持一级目录
模块下静态文件可直接调用
发送ajax请求,使用axios库,简单封装了一个库,为了减少学习成本,封装参数基本与JQ ajax一致,如果不需要可直接删除
整合了vue最流行的UI框架,vuxui2.x,github star 已接近8K了,组件非常全面,并且作者一直有维护,从0.x版本我就开始有使用了,具体了解更多,请访问官网 https://vux.li
基于webpack2,更高的构建速度,包体积更小,全面支持ES6 Modules
热更新,效率提升神器呀
支持Lesscss预处理
获取多页面的url参数的方法
全局注册vue全局过滤器的方法
安装依赖
npm install
调试环境 serve with hot reload at localhost:8091
npm run dev
生产环境 build for production with minification
npm run build
本地默认访问端口为8091,需要更改的童鞋请到项目目录文件config/index.js修改。
目录结构
webpack
|---build
|---src
|---assets #资源
|---css/common.css #css
|---font/ #字体图标
|---js/global.js #项目的配置
|---components 组件
|---views #各个页面模块,模块名可以自定义哦!
|---home #一级目录
|---list #二级目录
|---list.js
|---listApp.vue
......
如果看过源码的童鞋,在*.vue
页面里,都统一import了一个文件
import Lib from 'assets/js/global';
结束言
此vue多页面脚手架,并不局限于vux ui 框架,但现在的UI框架都要自己对webpack简单配置下。
生命在于折腾,理想还是要有的,万一实现了呢。
有问题随时沟通讨论哈!
网友评论