Vue框架开发帮助
安装配置
安装vue-cli脚手架
cnpm 等同于npm，使用淘宝镜像
# 全局安装 vue-cli
> cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目 逐项填入以下信息
> vue init webpack my-project
? Project name -- my-project #项目名称
? Project description -- A Vue.js project #项目描述
? Author -- Rolland #作者
? Vue build -- standalone
? Install vue-router? -- Yes #是否使用vue路由
? Use ESLint to lint your code? -- no #是否使用ESLint
? Setup unit tests with Karma + Mocha? Yes #是否使用Karma + Mocha测试框架
? Setup e2e tests with Nightwatch? --No #是否使用e2e
# 安装依赖
> cd my-project
> cnpm install
# 安装vuex
> cnpm install vuex
# 在开发模式下启动项目
> cnpm run dev
项目结构
├── index.html
├── main.js
├── App.vue
├── service
│ └── business.js # 抽取出接口请求
├── pages
│ ├── PageView.vue
│ └── ...
│
├── js # 公共js方法集合
│ ├── unit.js
│
├── css
│ ├── app.css # 全局css
│
├── router
│ ├── index.js # 路由配置
│
├── components # 组件
│ ├── Menu.vue # 菜单组件
│ └── ...
└── vuex
├── store.js # 我们组装模块并导出 store 的地方
├── actions.js # 根级别的 action
├── mutations.js # 根级别的 mutation
└── modules
├── userinfo.js
└── ...
组件
创建组件
在Vue.js的设计中将组件作为一个核心概念。可以说，每一个Vue.js应用都是围绕着组件来开发的。UI就相当于一个组件树。
Component Tree
在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例，在 Vue 中注册组件很简单,而在我们的项目中，使用以下方式创建一个组件：
// 创建一个新组件 test.vue
<template>
<div>
<h1>测试组件</h1>
<div>PLAY TO WIN!</div>
</div>
</template>
// script 非必须
<script>
export default {
name:'test'
}
</script>
<style>
h1 {
margin: 3px 5px;
}
</style>
组建中的script标签和style标签为非必须项，script标签相当于内部的js文件，style标签相当于内部的css文件，一般组件都会用到script标签，在本项目中建议非必要情况下尽量不使用style标签，而使用全局css样式
在本项目中要求所有组件都要设置name选项。
name属性允许组件模板递归地调用自身。注意，组件在全局用 Vue.component() 注册时，全局 ID 自动作为组件的 name。指定 name 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。
之后我们可以用以下方式使用这个组件：
// App.vue
<template>
<!-- 创建一个 test 组件的实例 -->
<testview></testview>
</template>
<script>
import testview from '@/components/test' //指向test.vue的路径
export default {
name: 'app', // app本身也是一个组件
components:{
testview // 使用组件要进行注册
}
</script>
