构建项目
# 全局安装 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（路由目录），根据业务需求，可以新建以下目录：
-
api: API目录 -
base：基础组件目录 -
common: 通用文件目录 -
views：视图目录 -
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中文版参考文档。
