Vue全家桶实践（一）---vue-cli

最近公司要重写运营管理系统，不想再维护之前的backbone了，赶紧要求前端整个重写。重开新坑，用了两周多撸出了第一版，收获很大。在实践中学习永远都是最高效的。趁热把学到的东西都记录总结下来，也算前端梳理一下思路。

Vue-cli

参考资料：

vue-cli文档

要开发Vue的SPA，就离不开Vue-cli这个友好的脚手架，它帮我们封装了webpack的复杂的配置，替我们省了很多事。
但实际上我们在开发的过程中，不可避免的需要修改这些配置，要想顺利高效的开发，对它的了解是必不可少的。接下来简单的梳理下vue-cli

快速开始：

// 全局安装脚手架
$ npm install -g vue-cli
// 初始化vue项目
$ vue init webpack my-project
// 进入项目目录
$ cd my-project
// 安装依赖
$ npm install
// 启动开发服务器
$ npm run dev

项目结构：

.
├── build/                      # webpack 配置文件
│   └── ...
├── config/
│   ├── index.js                # 主项目配置文件
│   └── ...
├── src/                          # 源代码
│   ├── main.js                 # app入口文件
│   ├── App.vue                 # 主app组件
│   ├── components/             # 通用组件
│   │   └── ...
│   └── assets/                 # 模块资源 (会被webpack处理)
│       └── ...
├── static/                     # 纯静态资源 (直接复制的静态资源)
├── test/                         # 测试相关
│       └── ...                
├── .babelrc                    # babel 配置，ES6/7语法转换
├── .editorconfig               # 文件换行，空格，tab和类似的设置，方便编辑器读取
├── .eslintrc.js                # eslint 配置，严格的代码规范。
├── .eslintignore               # eslint ignore 配置规则，哪些文件不需要通过eslint校验
├── .gitignore                  # git提交时忽略哪些文件
├── .postcssrc.js               # postcss 配置，他也是一种css预处理器
├── index.html                  # index.html 入口html
├── package.json                # 项目信息以及依赖
└── README.md                   # Default README file

执行脚本：

// 启动一个node.js本地开发服务器，开发时使用。
npm run dev

通过webpack和vue-loader编译处理vue单文件组件
保存状态和热重载
保存状态并在上边覆盖显示报错
执行eslint
创建source map方便调试

// 把源码打包，给开发环境使用。放在打包之后多出的dist文件夹中。
npm run build

压缩js
压缩html
提取出所有组件的css合并成一个文件并压缩。
给所有的静态资源加上一个版本号的hash防止用户浏览器缓存过期文件。并在index.html中引入上述文件。

// 执行单元测试。
npm run unit
// 执行e2e测试。
npm run e2e
// 执行eslint检查代码错误，并显示。
npm run lint

Babel 配置

一般不需要修改。

Linter 配置

一般不需要修改。

预处理器

vue-cli已经支持了热门的css预处理器如sass，less，stylus和postCSS等。在组件中使用的时候，只要在<style>标签上加上属性即可：

// 其中sass 和 scss两种写法（花括号和缩进）都支持
<style lang="scss">
/* write SASS! */
</style>

全局css文件：
通用的全局css，可以写在单独的文件中，方便维护。使用时在App.vue组件中引入即可。
但我是自己测试，在main.js中引入也可以。不过官方推荐的是在App中，所以我也改在App组件中引入了。

<!-- App.vue中引入 -->
<style src="./styles/global.less" lang="less"></style>

<!-- main.js中引入 -->
import 'assets/scss/common.scss'

处理静态资源

从上边的目录接口中能看到，我们构造的vue项目中有两个静态资源目录，分别是src/assets和static/。为啥捏？

简单来说，放在src/assets中的静态文件，webpack在编译的时候会把各种静态资源解析为依赖模块，webpack会给他加上各种识别码，把他们变成js源代码的一部分，比如图片转为base64。而放在static/中的，webpack只是直接复制粘贴过去而已，所以这些文件在引用时，必须要使用绝对路径。

环境变量

有事我们需要根据运行环境的不同，对代码做不同的控制。比如在本地开发时要通过本地node服务器转发请求，想给所有的接口url增加一个’/api’前缀，然后proxyTable就可以设置，将所有以’/api’开头的请求转发到开发服务器。而当我们发布的时候，生产环境是不需要这个’/api’前缀的，总不能一个一个去删除。这时候就可以用环境变量来做判断。config文件夹下的dev.env.js和prod.env.js就分别对应开发环境和生产环境的配置。

配置可以很方便的在代码中按下边的方式读取，并且解决我们刚才遇到的问题：

// main.js

Vue.config.productionTip = process.env.NODE_ENV === 'production'

// 在axios拦截器中判断当前环境，来决定是否增加前缀
// 使用axios来发ajax
// 增加一个拦截器，当method为form时，使用表单提交的方式
// 使用qs包将data转为表单数据
axios.interceptors.request.use((config) => {
  // 若在本地开发环境，则给url增加 '/api' 后缀
  if (!Vue.config.productionTip) {
    config.url = '/api' + config.url
  }
  return config
}, (error) => {
  return Promise.reject(error)
})
Vue.prototype.$http = axios

这里暂时不懂没关系，关于axios的部分会在之后的博客中详解。

与后端框架集成

如果是开发前后端分离的项目，那么基本上不用怎么修改config/index.js这个文件。但是如果我们要跟后端框架（如Rails/Django/Laravel）等结合使用，在这里配置就可以直接生成后端需要的东西。

实际上,即使是前后端分离的项目，这个config/index.js文件也是我们最常接触的配置文件。我们简单看看：

// config/index.js
// see http://vuejs-templates.github.io/webpack for documentation.
var path = require('path')

module.exports = {
  // npm run build 打包编译文件，放到dist文件夹
  build: {
    // 引入环境配置文件
    env: require('./prod.env'),
    // 入口文件是打包后的dist文件夹中的index.html文件，必须是绝对路径
    index: path.resolve(__dirname, '../dist/index.html'),
    // 指向包含打包后所有静态资源的目录地址。必须是绝对路径
    assetsRoot: path.resolve(__dirname, '../dist'),
    // 这里是所有的静态资产，其中static的是被直接复制过来的，而assets先处理再拿过来
    assetsSubDirectory: 'static',
    assetsPublicPath: './',
    // 生产环境是否要source map
    productionSourceMap: true,
    // 默认关闭压缩，因为已经帮你压缩过了。
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report
  },
  // npm run dev 开发服务器
  dev: {
    // 引入开发环境的配置文件
    env: require('./dev.env'),
    // 设置监听端口
    port: 8080,
    // 自动打开默认浏览器
    autoOpenBrowser: true,
    // 静态资源在 static文件夹下
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    // 开发过程中代理请求。开发时我们会在本地启用一个nodejs服务器，然后代理你的所有
    // 请求，把请求转发至远程开发服务器，解决跨域问题。
    // 下边是一个简单的设置
    proxyTable: {
      // 所有以 '/api' 为开头的请求
      "/api": {
        // 目标地址
        target: "http://xx.xx.xx.xx:9091",
        changeOrigin: true,
        // 重写请求
        pathRewrite: {
          // 将 '/api' 前缀去掉
          "^/api": ""
        }
      }
    },
    cssSourceMap: false
  }
}

了解了以上这些，就能够解决大多数开发中的问题了。看起来很复杂的东西，一行行读下去，其实也很简单。

Vue全家桶实践（一）---vue-cli

Vue-cli

猜你喜欢