vue项目配置

1. 快速开始

使用vue快速构建项目步骤：

	$ npm install -g vue-cli
	$ vue init webpack my-project
	$ cd my-project
	$ npm install
	$ npm run dev

2. vue基本项目结构解析

.
├── build/                      # webpack 配置文件
│   └── ...
├── config/
│   ├── index.js                # 项目配置文件
│   └── ...
├── src/
│   ├── main.js                 # app 入口文件
│   ├── App.vue                 # app 根组件
│   ├── components/             # 项目文件夹
│   │   └── ...
│   └── assets/                 # 静态资源文件
│       └── ...
├── static/                     # 纯静态资产 (直接复制)
├── test/
│   └── unit/                   # 单元测试
│   │   ├── specs/              # 测试规范文件
│   │   ├── eslintrc            # eslint的配置文件，仅为单元测试添加额外设置
│   │   ├── index.js            # 测试构建条目文件
│   │   ├── jest.conf.js        # 当使用Jest进行单元测试时，配置文件
│   │   └── karma.conf.js       # 在为单元测试使用Karma时，测试运行器配置文件
│   │   ├── setup.js            # 在Jest运行单元测试之前运行的文件
│   └── e2e/                    # 端对端测试
│   │   ├── specs/              # 测试规范文件
│   │   ├── custom-assertions/  # 为e2e测试定制断言
│   │   ├── runner.js           # 测试运行器脚本
│   │   └── nightwatch.conf.js  # 测试运行程序配置文件
├── .babelrc                    # babel配置文件
├── .editorconfig               # 编辑器的缩进、空格/制表符和类似的设置
├── .eslintrc.js                # eslint配置
├── .eslintignore               # eslint忽略规则
├── .gitignore                  # gitignore忽略文件（夹）配置
├── .postcssrc.js               # postcss配置
├── index.html                  # 主模板
├── package.json                # 脚本依赖配置
└── README.md                   # 默认说明文件

3. 脚本运行

npm run dev
启动Node.js本地开发服务器，详细信息，请参见开发期间的API代理
所用技术： Webpack + vue-loader
作用：配置、构建、热加载等
npm run build
建立生产资产。有关更多详细信息，请参见与后端框架集成
所用技术：UglifyJS html-minifier cssnano
作用： 打包项目
npm run unit
使用Jest在JSDOM中运行单元测试。有关更多详细信息，请参见单元测试
所用技术： Jest
作用：测试
npm run e2e
使用Nightwatch运行端到端测试。有关更多详细信息，请参见端到端测试
所用技术：Nightwatch
作用：测试
npm run lint
运行eslint并报告代码中的所有掉毛错误
所用技术： Linter

4. Babel

Babel配置说明：说明
用什么配置Babel： babel-preset-env
作用：根据目标浏览器或运行时环境自动确定所需的Babel插件和polyfill，从而将ES2015+ 编译为ES5
用法： package.json或.babelrc文件配置 browserslist

	{
	  "browserslist": [
	    "> 1%",
	    "last 2 versions",
	    "not ie <= 8"
	  ]
	}

注意：最新的稳定版本babel-preset-env，v1.6.1不支持从中加载配置package.json，因此更改目标环境，请确保同时更新package.json和.babelrc，但是 请注意，此问题已在beta版本（@babel/preset-env@7.0.0-beta.34）中修复，一旦模板超出beta版本，该模板就会进行更新

5. Linter配置

添加项目时选择ESLint预设即可享用：linter配置代码检查，可以配置相关文件以满足开发者需求
例如强制加分号：.eslintrc.js文件中添加以下代码即可

	"semi": [2, "always"]

还可以快速修复代码错误，执行以下代码：

	npm run lint -- --fix

详情见：Elint官方文档

6. 预处理器选择安装与使用

流行的CSS预处理器（包括LESS，SASS，Stylus和PostCSS）
使用webpack安装相关依赖后即可使用，具体使用见：预处理器使用详情

7. static 和assets

webpack处理静态资源的原理、二者区别见http://vuejs-templates.github.io/webpack/static.html

8. 环境变量

分为生产环境、发展环境、测试环境，该配置config文件夹，详细见 此处

9. 继承后端，开发

vue提供dev、build开发打包环境，相关配置及说明如下
dev环境
反向代理配置方法

dev: {
    // Paths
    assetsSubDirectory: 'static', // 静态资源路径
    assetsPublicPath: '/', // 公共资源路径
    proxyTable: {},	// 反向代理配置
    // Various Dev Server settings
    host: 'localhost', // 运行地址
    port: 8080, // 运行端口号
    // skipping other options as they are only convenience features
  },

build环境

 build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'), // 构建文件入口
    // Paths
    assetsRoot: path.resolve(__dirname, '../dist'), // 静态资源处理位置根目录
    assetsSubDirectory: 'static', // webpack静态资源文件夹名称配置
    assetsPublicPath: '/', // 公共资源路径
    productionSourceMap: true, // 是否生成用于生产构建的源地图
    // skipping the rest ...
  },

10. 反向代理

配置示例 http-proxy-middleware 上下文

	// /api == proxyTable.target
	proxyTable: {
     // proxy all requests starting with /api to jsonplaceholder
     '/api': {
       target: '', // 配置目标服务器的地址
       changeOrigin: true, // 是否开启反向代理
       pathRewrite: {
         '^/api': ''
       } // 这里重写路径运行后就代理到对应地址
     }
     // 全局模式匹配
     // 详情见 http://vuejs-templates.github.io/webpack/proxy.html
     proxyTable: {
	  '**': {
	    target: '',
	    filter: function (pathname, req) {
	      return pathname.match('^/api') && req.method === 'GET'
	    }
	  }
	}

11. 测试运行与SEO优化

此处内容随研究深入加以说明 参考地址点我

12. vuex 配置

vuex配置点我，需要over wall，后期会补充到我的csdn博客内