project-name

A basic web app.

开发、测试、打包命令

# install dependencies
yarn install

# serve with hot reload at localhost:8080
yarn run dev

# build for production with minification
yarn run build:beta
yarn run build:release

# run unit tests
yarn run unit

# run all tests
yarn test

部署

1. 修改 /src/utils/config.js 文件中的配置

2. 使用命令进行打包，产出的 /dist 目录下的文件部署到静态资源服务器（如 Nginx）上。前端路由使用的是 browserHistory，因此请务必将静态资源服务器配置为所有路径均返回 index.html ，避免 404 。例如 Nginx 的配置文件：

server {
  listen 8080;
  index index.html;
  root /YOUR_PATH/THIS_PROJECT/dist;
  location / {
    try_files $uri $uri/ /index.html;
  }
}

工作流

技术栈：

• Vue 2 （https://cn.vuejs.org/）
• vue-router (搭配 Vue 的路由库)
• vuex
• less (CSS 编写方案）
• Vue scoped style （CSS 模块化方案）
• isomorphic-fetch （fetch polyfill）
• ...

开发工具：

• yarn
• babel
• webpack
• eslint (airbnb-base)
• karma + mocha + phantomjs
• ...

推荐的编辑器：

VSCode

推荐的插件：

• Add New Line to Files

• Auto Rename Tag

• HTML CSS Support

• HTML Snippets

• Path Intellisense

• ...

源码目录 /src ：

/assets       其他静态资源
/components   少量的公共组件
/styles       少量的全局样式和公共样式
/views        主要的视图页面
App.vue       整个应用的容器
main.js       入口文件
router        路由

主视图 的变换由 路由 控制，不同路由展示不同视图；

/views 目录下，每个 .vue 文件对应一个视图页面；

每个视图页面中有 模板、脚本、样式 三部分。

协作要求：

为方便协作开发，预先约定如下：

• 样式编写使用 less
• 局部样式：每个 视图/组件 的样式写在各自文件的 <style lang="less" scoped></style> 标签中，其为局部作用域，仅对当前文件有效；所以 className 随意命名，不用担心与其他样式冲突
• 公共样式：可在 /styles 下增加公共的 .less 文件，然后在 .vue 视图文件的样式标签中手动 @import 加载
• 全局样式：已全局加载，必须写在 /styles/global/ 下，并且 className 必须有 global-- 前缀。其 className 可在任何模板中使用
• 第三方全局样式：可能会引入一些第三方 .css 文件，在 /main.js 入口文件中使用 require('xxxx) 全局加载
• 其他资源：.less/.js/.vue 以外的资源放在 /assets 下的分类目录中，如图片放在 /assets/images

文件的引入方式：

src 已添加到 webpack 别名，别名为 @，可以这样使用：

.js : import xxx from '@/utils/xxx'

.vue : import xxxx from '@/components/xxxx'

.css :（来自于 node_modules 的外部文件）

    在 /main.js 入口文件中使用 `require('xxxxx.css')` 全局引入

.less :

    全局引入：在 /main.js 入口文件中使用 `require('xxxx.less)`

    局部引入：在 .vue 文件的 <style> 标签中，或 .less 文件中：使用 `@import "~@/styles/xxx.less";`

svg/png/eot/json/other :

    在 .vue 文件的 <style> 标签中，或 .less 文件中：使用 `background: url(~@/assets/images/xxx.png);`

    在 js 代码中推荐使用 `const xxx = require('@/assets/images/xxx.png')` [ * 当然你要是想用 import xxx from '@/assets/images/xxx.png' 也可以，但 require 更加清楚地表明了这是 webpack 的能力，所以更推荐前者 ]