编程

使用vue和vue-router开发网站

最近要开发一个网页,放在服务器上作展示用.专门去学个 php 吧又不值得,而且还要部署,太麻烦.直接用 vue,经过 webpack 打包成静态文件丢给 nginx 正好,本来也没什么后台功能,真是纯展示用的.正好用 vue 练手.

环境搭建

  • nodejs 7.4.0(看了官网,最新版已经到了 7.10.0)
  • npm 4.5.0
  • vue-cli 2.8.1
  • vue 2.3.3
  • vue-router 2.5.3

vue-cli是一个用来搭建项目的工具,用来生成 vue 项目的一些基本的结构.

首先

npm i vue-cli -g

安装 vue-cli,安装完成后使用

vue init template-name project-name

来新建项目.比如我用的是 webpack,vue init webpack project-name 他会下载模板,然后询问一些设置的问题,如项目名,项目描述,作者等.还会问构建方式,因为我需要输出为静态文件,所以选择了runtime+compiler,还会询问是否要使用 vue-router.回答完所有的问题之后会发现现在的目录下多了一个project-name的文件夹,就是vue-cli创建好的项目文件夹.

按照他的提示

cd project-name
npm i
npm run dev

在安装完依赖后就可以看到相应的页面了.

![hello world]](https://ws1.sinaimg.cn/large/bd69bf14ly1ffmycii112j20jr0hfjs9.jpg)

(插了张微博的 https 的图片,看来是会不会影响小绿锁)

.
|-- README.md
|-- build
|   |-- build.js
|   |-- check-versions.js
|   |-- dev-client.js
|   |-- dev-server.js
|   |-- utils.js
|   |-- vue-loader.conf.js
|   |-- webpack.base.conf.js
|   |-- webpack.dev.conf.js
|   `-- webpack.prod.conf.js
|-- config
|   |-- dev.env.js
|   |-- index.js
|   `-- prod.env.js
|-- index.html
|-- package.json
|-- src
|   |-- App.vue
|   |-- assets
|   |   `-- logo.png
|   |-- components
|   |   `-- Hello.vue
|   |-- main.js
|   `-- router
|       `-- index.js
`-- static

生成的项目结构是这样的. build和config分别是与项目构建和设置有关的一些文件.如果没有什么特殊需求的话不需要更改. 我们需要编辑的就是 src 里面的文件了.其中App.vue是根组件,现在里面有一个<router-view>的标签,是后面vue-router用到的.

vue-router

vue-router 的是用来管理 spa 的路由的.

example:

import Vue from "vue";
import VueRouter from "vue-router";

import store from "@/store";
import Login from "components/login";
import Index from "components/index";

Vue.use(VueRouter);
const routes = [
  {
    path: "/",
    component: Login,
  },
  {
    path: "/index",
    component: Index,
    meta: {
      requireAuth: true,
    },
  },
];

const router = new VueRouter({
  routes, // （缩写）相当于 routes: routes
});

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) {
    // 判断该路由是否需要登录权限
    if (store.state.isLogin) {
      // 通过vuex state获取当前的token是否存在
      next();
    } else {
      next({
        path: "/",
        query: { from: to.fullPath },
        // 将跳转的路由path作为参数，登录成功后跳转到该路由
      });
    }
  } else {
    next();
  }
});

export default router;

跟其他的vue插件一样,需要Vue.use(VueRouter)来注册. 引入其他的组件,给每个 path 指定好相应的组件. 官方文档

其中的 store 是由于要使用 vuex 而引入的.

Vuex

vuex 是官方提供的状态管理工具.当初没明白这个状态管理工具是怎么个意思,实际用起来才发现,就是当你在不同组件中要使用一份共同的数据的话,就要通过 vuex 来管理,不然不同组间之间还要 emit 和 on,兄弟组间之间沟通就更麻烦了.

import Vuex from "vuex";
import Vue from "vue";

Vue.use(Vuex);
const state = {
  isLogin: false,
  auth: "",
  lessons: [],
};

/* eslint-disable no-new */
const store = new Vuex.Store({
  state,
  // 定义状态
  /* eslint-disable no-param-reassign,no-shadow*/
  mutations: {
    login(state, auth) {
      state.isLogin = true;
      state.auth = auth;
    },
    setLessons(state, lessons) {
      state.lessons = lessons;
    },
  },
});

export default store;

首先仍然是通过Vue.use(Vuex)来注册插件(如果是在 html 中直接使用 cdn 提供的 vuex 就不需要这一步了,引入的时候会自动进行.)

然后定义一个state对象,其中是我们需要用 vuex 来管理的数据.比如我需要储存isLogin是否登录,auth 认证的 token,还有lessons,这是要上的课程. 除了state,还有一个是mutations,要修改 vuex 中的数据只能通过mutations或者action进行mutations中只能进行同步操作,而action中只能进行异步操作.我没有用到 action 的地方.

因为我实际的需求其实修改其中的几个数据,所以两个mutations其实都只是修改 state 中的值.