Vue, vue-router, vuex项目构建

Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。
本篇记录如何构建 vue,vue-router,vuex 项目的步骤。

简单 demo
在项目的src/中进行工作

Vue.js 官方教程
vue-router 官方中文教程
vuex 官方中文教程

vue-cli 创建项目

vue.js 项目

使用npm需要提前安装 node.js,因为 node.js 自带了npm模块,调试的时候也需要用到 node.js,需要一些对npm的认识,另外需要一些webpack的知识,不需要自己配置的时候问题不大,根据教程键入命令行即可

创建空文件夹,在当前目录下打开命令行工具,使用 vue-cli:

# 全局安装 vue-cli
$ npm install --global vue-cli

# 创建一个基于 webpack 模板的新项目
$ vue init webpack vue-example

? Project name vue-example
? Project description A Vue.js project
? Author DeFeNG <1437931235@qq.com>
? Vue build standalone
? Install vue-router? No    #是否安装vue-router
? Use ESLint to lint your code? No  # 是否使用ESLint规范代码风格
? Setup unit tests with Karma + Mocha? No   # 是否安装测试
? Setup e2e tests with Nightwatch? No

  vue-cli · Generated "vue-example".

  To get started:

    cd vue-example
    npm install
    npm run dev

  Documentation can be found at https://vuejs-templates.github.io/webpack


# 安装依赖,走你
$ cd vue-example

# 安装依赖模块,根据package.json的依赖安装,等待即可
$ npm install

# 开启本地服务器进行调试,默认localhost:8080
# 改动代码页面能够自动更新,ctrl+c可停止服务
$ npm run dev

# 将最终代码打包到dist/目录下
$ npm run build

安装 vue-router

vue init webpack vue-example的时候,是否安装vue-router选择 yes 即可

安装 vuex

参考来源:http://www.wdshare.org/article/58dc8ec813a809c753831529

安装 vuex 模块,在根目录下:

$ npm install --save vuex   # --save相对--global,只在当前目录安装

创建以下路径文件/src/stores/index.js并添加如下代码:

// 引入依赖
import Vue from "vue";
import Vuex from "vuex";
// 使用vuex
Vue.use(Vuex);
// 引入state模块
import states from "./states";
import mutations from "./mutations";
import actions from "./actions";
/*
 * 第一种 state模块化
 * 适合大型项目以及状态多的项目写法
 * 注:模块化状态只是模块化state不分,其余getters,mutations,actions,是不分模块的,注意不要重命名
 */
// vuex 模块
// const index = {
//   state: states,
//   mutations: mutations,
//   actions: actions
// }
//
// const store = new Vuex.Store({
//   modules: {
//     index: index
//   }
// })
/*
 * 第二种 不分模块状态共享
 * 适合中小型项目以及状态少的项目写法
 */
const store = new Vuex.Store({
  state: states,
  mutations: mutations,
  actions: actions
});

export default store;

创建/src/stores/states/index.js 添加如下代码

// states
const states = {};
export default states;

创建/src/stores/mutations/index.js 添加如下代码

// mutations
const mutations = {};
export default mutations;

创建/src/stores/actions/index.js 添加如下代码

// actions
const actions = {};
export default actions;
到此vuex的引入和目录搭建已经完了;

main.js中引入:

import Vue from "vue";
import App from "./App";
import router from "./router";

// 引入vuex创建的store实例,路径 './stores' 为 './stores/index.js'的简写
import store from "./stores";

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  store, // store: store的简写
  template: "<App/>",
  components: { App }
});

stores/结构不固定,可使用官方的推荐

store
  ├── index.js          # 我们组装模块并导出 store 的地方
  ├── actions.js        # 根级别的 action
  ├── mutations.js      # 根级别的 mutation
  └── modules
    ├── cart.js         # 购物车模块
    └── products.js     # 产品模块
0%