基于 vue-cli 的 Vue js 单页应用项目模板
来源:互联网 发布:万网解析设置端口 编辑:程序博客网 时间:2024/06/06 03:04
介绍
https://github.com/zhaotoday/vue.js#技术栈
基于 vue-cli 的 Vue js 单页应用项目模板,在 vue-cli 基础上做了一些合理的修改和增强。功能包括:调试、构建、代码规范校验、单元测试、国际化等。
技术栈
Vue、Webpack、ES6、vue-router、Vuex、SASS、PostCSS 等。
参考
- Vue.js 中文网
- vue-router 中文网
- Vuex 中文网
- Vuex 通俗版教程
- Vuex 购物车示例
- Vue2.0 实践阶段性分享
使用
# 下载代码$ git clone https://github.com/zhaotoday/vue.js.git# 安装依赖$ npm install# 开发调试$ npm run dev# 构建$ npm run build# 执行单元测试$ npm run unit# 执行 e2e 测试$ npm run e2e# 执行所有测试$ npm test
对 vue-cli 的一些修改和增强
1. 将模板文件 index.html 从根目录移至 src 目录,将构建文件 index.html 移至根目录
理由:原 vue-cli 构建后的 index.html 存放在 dist 目录下。但通常,我们需要把整个项目提交到 git/svn,然后部署,这时候访问的默认首页需要是构建后的 index.html。
2. 提供 sass 支持
# 安装 node-sass、sass-loader$ npm install --save-dev node-sass sass-loader
<!-- 引入样式 --><style lang="scss" scoped src="./theme/styles/index.scss"></style>
3. 用 axios 作为 ajax 方案
官方已经不推荐 vue-resource 作为 ajax 方案,请用 axios 代替。
# 安装 axios$ npm install --save axios
链接、链接
4. 添加 polyfill
按需引入 polyfill,提高浏览器兼容性。
# 安装 core-js$ npm install --save core-js
polyfill 在 /src/utils/polyfill.js 文件中引入:
import 'core-js/es6/promise'
5. 用 Vuex 做状态管理
# 安装 vuex$ npm install --save vuex
链接
项目结构
|-- build // Webpack 项目构建|-- config // 项目开发环境配置|-- src // 源码目录| |-- app // 业务代码| |-- Articles // 文章业务模块| |-- Home // 首页| |-- Layout // 页面布局结构(除登录页外)| |-- Login // 登录页| |-- NotFound // 404 页| |-- Root // 根页面(可以在这里添加全局样式等)| |-- Unauthorized // 未授权页面(在开发权限相关系统时有用)| |-- components // 公共组件| |-- i18n // 全局国际化| |-- models // 数据模型(主要在 store 中用到)| |-- router // 路由配置| |-- routes // 各业务模块路由配置| |-- store // Vuex 状态管理| |-- actions.js // 根级别的 actions| |-- getters.js // 根级别的 getters| |-- mutations.js // 根级别的 mutations| |-- types.js // 根级别的 mutation types| |-- modules // 各业务模块的局部状态管理| |-- articles // 文章业务模块状态管理| |-- utils // 工具集合| |-- helpers // 帮助函数集合| |-- auth.js // 权限相关| |-- env.js // 环境配置类| |-- consts.js // 常量配置| |-- i18n.js // 国际化类| |-- init.js // 初始化| |-- polyfill.js // polyfill| |-- rest.js // RESTful 请求类| |-- App.vue // 页面入口| |-- main.js // 程序入口,加载各种公共组件|-- static // 静态文件,如:图片、JSON 数据等|-- .babelrc // babel-loader 配置|-- .editorconfig // 定义代码格式|-- package.json // 项目基本信息
公用组件规范
公用组件放在 /src/components 下。
|-- src // 源码目录| |-- components // 公用组件| |-- MyComponent // MyComponent 组件| |-- index.vue // MyComponent 的入口| |-- theme // MyComponent 的皮肤| |-- images // MyComponent 的图片| |-- styles // MyComponent 的样式| |-- index.scss // MyComponent 的样式入口| |-- utils // MyComponent 的工具集合| |-- i18n // MyComponent 的国际化| |-- components // MyComponent 的子组件| |-- ChildComponent // MyComponent 的子组件 ChildComponent,组件规范和 MyComponent 一致
业务组件规范
业务组件放在 /src/app 下,也就是一个页面,对应一个路由。规范和公用组件一直。
0 0
- 基于 vue-cli 的 Vue js 单页应用项目模板
- 基于 vue-cli 的 Vue js 单页应用项目模板
- 基于vue-cli的vue项目之vuex的使用1---------最简单的vuex模板
- 用Vue-cli生成vue+webpack的项目模板
- Vue.js脚手架vue-cli构建项目
- Vue.js脚手架vue-cli构建项目
- vue.js的安装--vue-cli脚手架
- vue.js脚手架vue-cli的搭建
- vue-cli的webpack模板项目配置文件的理解
- vue新建项目(一)vue-cli新建模板项目
- vue-cli的webpack模板项目配置文件分析
- vue-cli的webpack模板项目配置文件分析
- vue-cli的webpack模板项目配置文件分析
- vue-cli的webpack模板项目配置文件分析
- vue-cli的webpack模板项目配置文件分析
- vue-cli的webpack模板项目配置文件分析
- vue-cli的webpack模板项目配置文件简析
- vue-cli搭建单页面应用
- easyui子窗口(window)中关闭当前窗口,子页面关闭当前tab
- mysql一个字段多个值关联另一张表
- 基于vue.js 2.0,不使用webpack的nodejs服务,只在浏览器上单独使用在Element UI的Tree树形控件
- 随机梯度下降法(Stochastic Gradient Descent)和批量梯度下降法(Batch Gradient Descent )总结
- okHttpUtils(hongyang)的配置及使用(网络框架)
- 基于 vue-cli 的 Vue js 单页应用项目模板
- Java集合
- MATLAB/Simulink的Arduino支持包安装教程
- 死锁发生的条件,如何避免死锁
- EditText软键盘的弹出与关闭
- Linux学习之Mysql安装
- LAMP安装
- Andriod 一个View实现Banner(加入缓存,告别oom)
- opencv 计算直方图 calcHist()