Vue全家桶+iView开发流程记录

构建项目

# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖
$ cd my-project
$ npm install
$ npm run dev

建议用yarn代替npm，安装速度更快，且拥有版本锁定功能。

说明：因为采用.vue文件开发，不需要编译器，故在构建项目时， Vue build选项可以选择Runtime-only。另外可以选择是否安装vue-router。

安装完成后，项目目录如下：

• build
  webpack相关配置目录
• config
  开发环境与生产环境相关配置
• node_modules
  依赖包目录
• src
  源码目录，在此目录编写页面代码
• static
  第三方静态资源目录

安装并使用iView

$ npm install iview --save # 或者yarn add iview

// main.js
import Vue from 'vue'
import App from './App'
import router from './router'

import iView from 'iview'
import 'iview/dist/styles/iview.css'

Vue.use(iView)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

// App.vue
<template>
  <Table :columns="columns1" :data="data1"></Table>
</template>
<script>
  export default {
    data () {
      return {
        columns1: [
          {
            title: '姓名',
            key: 'name'
          },
          {
            title: '年龄',
            key: 'age'
          },
          {
            title: '地址',
            key: 'address'
          }
        ],
        data1: [
          {
            name: '王小明',
            age: 18,
            address: '北京市朝阳区芍药居'
          },
          {
            name: '张小刚',
            age: 25,
            address: '北京市海淀区西二旗'
          },
          {
            name: '李小红',
            age: 30,
            address: '上海市浦东新区世纪大道'
          },
          {
            name: '周小伟',
            age: 26,
            address: '深圳市南山区深南大道'
          }
        ]
      }
    }
  }
</script>

如需按需使用，请参考iView文档。

说明：如果使用webstorm开发，可以在script标签上加上type="text/ecmascript-6"，让代码高亮显示。

调整目录结构

默认情况下，src目录下有三个目录assets（静态资源目录），components（业务组件目录）, router（路由目录），根据业务需求，可以新建以下目录：

1. api: API目录
2. base：基础组件目录
3. common: 通用文件目录
4. views：视图目录
5. store: vuex状态管理目录（根据实际需求使用）

css预处理器

常用的css预处理器有sass、less、stylus，三者功能相近，因为第三者采用了缩进式的语法，且摒弃了大括号，使用起来更简洁，所以使用stylus作为css预处理器。

安装：

npm install stylus stylus-loader --save-dev #
 或者yarn add stylus stylus-loader --dev

使用：

// App.vue
<template>...</template>
<script>...</script>
<style lang="stylus" scoped>
body
    background-color: #ddd
</style>

scoped限制当前style中的样式只在当前组件中生效。详细stylus语法请参考stylus中文版参考文档。