vue2.x+elementui2.x构建后台管理系统-vue初始项目的安装配置及elementui的引入

一、vue2.x的安装及初始配置

想要使用vue框架创建一个vue项目我们有很多办法，比如引入vue.js,比如安装vue脚手架，比如vue3的vite安装，比如在vue3的UI界面直接创建vue项目，由于我们这里是vue2版本，没有UI界面，也没有vite工具，所以我们选择用vue2的脚手架创建vue项目。
安装node.js 这样我们可以使用npm工具来安装vue脚手架

安装node.js说明

脚手架安装好之后就可以用npm 全局安装vue脚手架了。
创建命令如下：

 npm install -g vue-cli  ## 脚手架安装命令
 vue -V  # 查看当前vue版本

然后用vue脚手架创建vue项目，需要创建一个存放项目的目录，如下文的 D:\vue-zly-admin
然后在这个路径下的路径提示框把原来的路径去除掉，打上cmd，然后回车，就能在此路径下打开命令行窗口
然后在命令行窗口

vue init webpack  # 大概是安装vue项目模板的意思

然后会出现如下选择，按个人喜好选择即可（不过初学者建议不要用ESLint，此模式称为严格模式, 对代码规范非常严格， unit tests是单元测试， e2e测试其实就是模拟用户行为， 这两个都看当前项目需求选择就好了。）

等待片刻， 项目安装完后是这样的。

按提示 下一步 命令为

npm run dev

访问本地8080端口就可以看到运行的vue项目了。

二、关于vue2.x的一些初始配置

1. 去掉路径上的"#"号
   打开vue项目后， 我们发现网址路径上中间有一个#号 http://localhost:8080/#/login，为了美观，我们肯定要去掉这个#号。
   这个/#/其实是因为此时是在vue-router 的hash模式，我们只需将router下的index.js中的mode设置为history就可以了
   
   此时保存再返回去看界面，就会发现#消失了。
2. 重定向"/"路径
   将http://localhost:8080/ 重定向为http://localhost:8080/login
   只需在router对象的需要重定向的路径加上redirect，然后指定重定向路径即可。
   

三、elementui 的引入

首先先安装elementui，使用 npm i element-ui -S 安装。

然后在脚手架创建的main.js文件中引入elementui

四 系统初处理

经过前面一系列操作，我们已经安装好了vue+elementui 的开发环境，去掉了Helloworld.vue文件，重新新建一个UserLogin.vue文件， 然后在router下的index.js下重定向了根路径为登陆路径，再添加一个login路由指向的组件即可。

• UserLogin.vue

<template>
    <h1>hello world</h1>
</template>

• router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import userlogin from '@/components/userlogin'

Vue.use(Router)

export default new Router({
  mode:'history',
  routes: [
    {
      path: '/',
      redirect: '/login'
    },
    {
      path:'/login',
      name:'login',
      component: userlogin
    }
  ]
})

然后我们在去本地8080端口看，是不是界面已经变成了这样呢