Vue项目使用elementui+vuex+routes

安装环境

1. 安装vue+nodejs

略

2.创建项目

vue init webpack 项目名

 

 

3. 安装依赖

PS：此处自行选择安装

# 进入工程目录
cd hello-vue

# 安装vue-router
npm install vue-router --save-dev

# 安装element-ui
npm i element-ui -S

# 安装SASS加载器
npm install sass-loader node-sass --save-dev

# 安装axios
npm install --save axios vue-axios

# 安装项目
npm install

# 安装js-cookies
npm i js-cookie -S

# 启动项目
npm run dev

Vue路由

1. 创建路由文件夹

2. 改写路由

// index.js

import Vue from 'vue'
import Router from 'vue-router'
import homeroute from './routes/home.js'
import Vuex from 'vuex'

Vue.use(Router);

const router = new VueRouter({
  routes:homeroute,
  model: 'history',
  base: '/',
})

export default router

此处把 export default newRouter({});进行改写，把它单独拿出来，而此时我们定义的变量router引用了homeroute。而homerouter是我们定义的方便管理home路由的一个路由文件，后序我们再加的时候只需要新建路由文件，然后分开管理即可。尽量做到每个页面一个路由文件。做好路由的统一管理。

// home.js

let routes = [
    {path: '/', redirect: '/home'},
    {
      path: '/home',
      name: "Home",
      component: (resolve) => require(['../../views/home.vue'], resolve),
    },
    {
      path: '/hello',
      name: "HelloWorld",
      component: (resolve) => require(['../../components/HelloWorld.vue'], resolve),
    }
    
  ]

export default routes;

这里我们把/进行重定向，原本/是直接进入到app.vue然后引用了Helloword.vue文件。我们把helloworld.vue进行了路由重写，让他定位到/hello中。然后我们redirect直接就跳到了我们的首页。而我们的/home就是我们views/文件夹下面的home.vue