vuejs入门实践小项目

首先新建一个项目这个很多博客都讲过，就不再赘述，下面直接开始做demo，一个小时搞定vue小demo。

新建文件夹view存放页面，demo共有5个页面，Add.vue、Home.vue、List.vue、Login.vue、User.vue。
懒得写CSS代码，用的Elementui，感兴趣的小伙伴可以尝试一下。
创建好文件之后开始写代码，撸起袖子加油干！！！
打开main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)
Vue.config.productionTip = false

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

打开router文件下的index.js文件，如下：

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/view/Login'
import Home from '@/view/Home'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  linkActiveClass: 'active',
  routes: [
    {
      path: '/',
      name: 'login',
      component: Login
    },
    {
      path: '/home',
      name: 'home',
      component: Home,
      children: [
        {
          path: 'list',
          name: 'list',
          component: () => import(/*webpackChunkName: "list" */ '@/view/List')
        },
        {
          path: 'user',
          name: 'user',
          component: () => import(/*webpackChunkName: "user" */ '@/view/User')
        }
      ]
    },
    {
      path: '/add',
      name: 'add',
      component: () => import(/*webpackChunkName: "add" */ '@/view/Add')
    }
  ]
})

在src文件下新建一个store.js文件，

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        lists: []
    },
    mutations: {
        addItem (state, value) {
            state.lists.push(value)
        }
    },
    actions: {

    }
})

打开App.vue

打开Login.vue，实现注册登录功能：

打开Home.js

打开List.vue，实现新闻列表页：

打开Add.vue，实现新闻添加页：

打开User.vue，实现个人中心页：

到此页面实现完成！