vue开发帮助

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

// script 非必须

组建中的script标签和style标签为非必须项，script标签相当于内部的js文件，style标签相当于内部的css文件，一般组件都会用到script标签，在本项目中建议非必要情况下尽量不使用style标签，而使用全局css样式

在本项目中要求所有组件都要设置name选项。

name属性允许组件模板递归地调用自身。注意，组件在全局用 Vue.component() 注册时，全局 ID 自动作为组件的 name。指定 name 选项的另一个好处是便于调试。有名字的组件有更友好的警告信息。

之后我们可以用以下方式使用这个组件：

// App.vue

给组件传值

路由配置

状态管理

使用自定义JS文件