vue通用后台管理

---

前言

---

一、前提准备

1.node下载

https://nodejs.org/en/download/下载Node,在控制台输入node -v以及npm -v后出现版本号即安装成功。

2.vue脚手架安装

用npm下载可能会失败，因为是国外镜像
(1)可以用yarn下载，先输入yarn -v是否安装（安装会有版本号），若没有安装，可以用npm i -g yarn先安装yarn，然后用 yarn global add @vue/cli安装包
（2）可以修改npm源下载。先用npm config get registry查看镜像源，然后使用npm config set registry https://registry.npmmirror.com/修改，再使用npm config get registry发现已修改。使用npm install -g @vue/cli安装包
这里使用yarn下载，下载好后查看版本发现禁止运行脚本。

【解决方法】
1.执行get-ExecutionPolicy，显示Restricted，表示状态是禁止的;
2.执行set-ExecutionPolicy RemoteSigned。正常情况执行完后下一步再执行get-ExecutionPolicy，就显示RemoteSigned。而这里出现了新的问题，如下

【解决方法】根据提示输入 Set-ExecutionPolicy -Scope CurrentUser

安装成功后：

2.1利用脚手架启动项目

【该方法需手动装vue-router，可以参考另一篇项目创建链接: link】
打开webstorm工作目录，进入到cmd，使用vue create my-app创建项目，出现版本提示
【vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6】
根据提示卸载重新安装
继续创建my-app项目，选择vue2


WebstromProjects文件夹里会出现一个新的my-app文件，其目录结构如下

启动项目npm run serve,
【启动vue项目的时候报错：TypeError: Cannot read property ‘version’ of undefined的解决方法】
重新下载依赖包，npm install
重新运行npm run serve

3.vue.js引入（本地引入）

用cdn引入2.0版本，找到vue.min.js文件后复制链接打开，创建vue.js文件，把内容复制进去，src直接引入本地文件。

4.element-ui下载

参考另一篇链接: link
控制台输入npm i element-ui -S，在main.js添加以下代码

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);//引入elementui

可以在App.vue测试按钮页面

<template>
  <div id="app">
    <el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>
  </div>
</template>

<script>


export default {
  name: 'App'

}
</script>

<style>

</style>

4.vue-router的引入

vue-router官网链接: link
下载：npm i vue-router@3.6.5 @用于指定版本
下载完成后，package.json里dependencies会出现vue-router版本号

在src文件下新建router文件，router下新建index.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

4.1 vue-router的使用

（1）创建路由组件
在src下新建组件views文件夹，该文件夹下分别创建两个组件Home.vue和User.vue文件，然后在Index.js引入

import Home from "@/views/Home.vue";
import User from "@/views/User.vue";

Home.vue

<template>
  <h1>我是Home</h1>


</template>
<script>
export default {
  data(){
    return{}
  }
}
</script>

<style scoped>

</style>

User.vue

<template>
  <h1>我是User</h1>


</template>
<script>
export default {
  data(){
    return{}
  }
}
</script>

<style scoped>

</style>

（2）将路由与组件进行映射，index.js文件

const routes=[
    {path:'/home',component:Home},
    {path:'/user',component: User}
]

（3）创建router实例,并将路由实例对外暴露，index.js

//3.创建router实例
const router = new VueRouter({
    routes // (缩写) 相当于 routes: routes
})

// 将路由器对外暴露
export default router

import Vue from 'vue'
//import Router from 'vue-router'
import Home from "@/views/Home.vue"
import User from "@/views/User.vue"


//import Home from "../views/Home.vue";
//import User from "../views/User.vue";
import VueRouter from "vue-router";

//Vue.use(Router)
Vue.use(VueRouter)

//1.创建路由组件

//2.将路由与组件进行映射
const routes=[
    {path:'/home',component:Home},
    {path:'/user',component: User}
]

//3.创建router实例
const router = new VueRouter({
    routes // (缩写) 相当于 routes: routes
})

// 将路由器对外暴露
export default router

//4.在App.vue将路由匹配到的组件渲染

// export default new Router({
//     routes:[
//         {
//             path:'/home',
//             component:Home
//         },
//         {
//             path:'/user',
//             component: User
//         }
//     ]
// })

提示：注意引入Router和VueRouter创建实例会有不同，不然无法访问到/home和/user

（4）引入挂载
在main.js里用import router from './router'引入，在下面Vue里router挂载
main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);//引入elementui

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

（5）要记得在App.vue将路由匹配到的组件渲染

App.vue

<template>
  <div id="app">
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>

  </div>
</template>

<script>


export default {
  name: 'App'

}
</script>

<style>

</style>

运行后发现出现[eslint]错误，由于分号可能不规范引起的
【解决方法】
找到vue.config.js,添加lintOnSave:false //关闭eslint校验
然后重新运行不报错

提示：运行后默认加上/#,因为vue-router是根据锚点来进行定位的,也就是根据hash值来跳转的（单页面应用）。想要去掉，创建实例时设置mode为history

总结

参考视频学习：https://www.bilibili.com/video/BV1QU4y1E7qo?spm_id_from=333.337.search-card.all.click