Vue实例搭建 - ToDoList

学习文章在这里。

1. 搭建环境

Nodejs与npm的安装不再叙述（希望大家装上的node版本大于等于6.x，不然还需要加上–harmony标志才可以开启es6），默认读者已经掌握npm安装依赖的方法。先安装npm，然后安装cnpm，这是淘宝源的npm。

我的评论，好像用cnpm install命令安装的文件好像不会自动修改package。

brew install npm
npm install -g cnpm --registry=https://registry.npm.taobao.org

首先全局安装

cnpm i vue-cli -g
vue init webpack demo
cd demo
cnpm install
cnpm run dev

到这里应该可以在http://localhost:8080/#/里看到欢迎界面

安装一些依赖，这里按照博文里的版本来

cnpm install [email protected] [email protected] [email protected] [email protected] [email protected]

再创建app.js文件，如下。

const app = require('koa')()
  , koa = require('koa-router')()
  , json = require('koa-json')
  , logger = require('koa-logger'); // 引入各种依赖
app.use(require('koa-bodyparser')());
app.use(json());
app.use(logger());
app.use(function* (next){
  let start = new Date;
  yield next;
  let ms = new Date - start;
  console.log('%s %s - %s', this.method, this.url, ms); // 显示执行的时间
});
app.on('error', function(err, ctx){
  console.log('server error', err);
});
app.listen(8889,() => {
  console.log('Koa is listening in 8889');
});
module.exports = app;

新开一个terminal并输入

node app.js

Koa就打开完毕了，在8889端口

2. 前端页面构建

登陆界面

安装element-ui。

cnpm install [email protected]

修改src/main.js，这里有坑（主要表现为eslint那行注释不能删），按我的来

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui' // 引入element-ui
import 'element-ui/lib/theme-default/index.css'
Vue.use(ElementUI) // Vue全局使用

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  template: '',
  components: { App }
})

在index.html中加入以下代码为了响应式页面

安装两个stylus依赖

cnpm install [email protected] [email protected]

创建src/components/Login.vue

修改src/App.vue

到这里应该可以看到http://localhost:8080/#/有了登陆欢迎界面

todolist 界面

还是在src/components目录下，写一个叫做TodoList.vue的文件。

写完TodoList之后，我们需要将它和vue-router配合起来，从而使这个单页应用能够进行页面跳转。

页面路由

由于不采用服务端渲染，所以页面路由走的是前端路由。安装一下vue-router：cnpm install [email protected].

这一部分需要改写main.js 和 App.vue，引入路由router。一个坑是eslint真的很严格，为了避免严格的错误，在/build/webpack-base.conf.js中删除以下部分：

{ 
    test: /\.(js|vue)$/,
    loader: 'eslint-loader',
    enforce: 'pre',
    include: [resolve('src'), resolve('test')],
    options: {
      formatter: require('eslint-friendly-formatter')
    }
 },

然后记得重新cnpm run dev!! 这样就可以解除严格的eslint啦。

具体改后的代码如下，main.js挂载路由：

import Vue from 'vue'
import App from './App'
// import router from './router'
import ElementUI from 'element-ui' // 引入element-ui
import 'element-ui/lib/theme-default/index.css'
import VueRouter from 'vue-router'

Vue.use(ElementUI) // Vue全局使用
Vue.use(VueRouter)

import Login from './components/Login'
import TodoList from './components/TodoList'
const router = new VueRouter({
  mode: 'history', // 开启HTML5的history模式，可以让地址栏的url长得跟正常页面跳转的url一样。（不过还需要后端配合，讲Koa的时候会说）
  base: __dirname,
  routes: [
    {
      path: '/',  // 默认首页打开是登录页
      component: Login // 注册login
    },
    {
      path: '/todolist',
      component: TodoList // 注册todolist
    },
    {
      path: '*',
      redirect: '/' // 输入其他不存在的地址自动跳回首页
    }
  ]
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router: router,
  template: '',
  components: { App }
})

App.vue把路由视图放到页面上:

这个时候你如果在地址栏后加上/todolist那么就会跳转到TodoList页面啦。

下面改写一下Login.vue，就可以从login跳转到todolist了。

······




登录
······

实际上我们是单页应用，只是在应用内进行页面跳转而已，没有向后端额外请求。

3. 后端环境搭建