asp.net 安装element ui_05-Vue脚手架安装axios、echarts等插件（二）

1、安装ElementUI

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。官方推荐使用 npm 的方式安装，因为它能更好地和 webpack 打包工具配合使用。具体的安装命令如下：

# npm 安装npm i element-ui -S# ORnpm install element-ui --save

执行完上述命令后，在package.json文件中，会增加了element-ui的引用，具体内容如下：

{  "name": "default",  "version": "0.1.0",  "private": true,  "scripts": {    "serve": "vue-cli-service serve",    "build": "vue-cli-service build"  },  "dependencies": {    "core-js": "^2.6.5",    "element-ui": "^2.13.2",    "vue": "^2.6.10"  },  "devDependencies": {    "@vue/cli-plugin-babel": "^3.8.0",    "@vue/cli-service": "^3.8.0",    "vue-template-compiler": "^2.6.10"  }}

但是仅仅引入进来，还不能直接使用，还需要在main.js文件中，引入element-ui才能在各个组件中使用，具体代码如下：

// file:main.jsimport Vue from 'vue'//--1import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'import App from './App.vue'//--2Vue.use(ElementUI)new Vue({  el: '#app',  render: h => h(App)})

2、安装axios

既然vue是前后端分离的，那么前端和后端的数据交换，就需要一个js库来实现，在这里我们选择的是axios，安装命令如下：

npm install axios --save

安装完成后，要想使用axios库，也需要在main.js文件中增加如下配置代码：

// file:main.jsimport Vue from 'vue'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'//--1import axios from 'axios'import App from './App.vue'//--2axios.defaults.baseURL="http://localhost:8080";Vue.prototype.$http = axiosVue.use(ElementUI)new Vue({  el: '#app',  render: h => h(App)})

axios的请求可以使用下面的范例：

• 异步模式：

    axios      .get('https://api.coindesk.com/v1/bpi/currentprice.json')      .then(response => {        this.info = response.data.bpi      })      .catch(error => {        console.log(error)        this.errored = true      })      .finally(() => this.loading = false)

同步模式：

//使用 asyns/await async getHistoryData (data) { try {   let res = await axios.get('/api/survey/list/', {     params: data   })   this.tableData = res.data.result   this.totalData = res.data.count } catch (err) {   console.log(err)   alert('请求出错！') }}

3、安装vue-router

如果在创建项目的时候没有选择vue的路由插件，这就需要手动安装了，安装命令如下：

npm install vue-router# ORnpm install vue-router --save

安装完插件之后，需要在main.js中引入vue-router，具体代码如下：

// file:main.jsimport Vue from 'vue'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'import axios from 'axios'import App from './App.vue'//--1import router from './router'//挂在到vue#appVue.prototype.$http = axios// 配置请求的根路径axios.defaults.baseURL = 'http://192.168.48.1:9001/'Vue.use(ElementUI)new Vue({  el: '#app',  //--2  router,  render: h => h(App)})

在组件中增加路由占位符：

加上上面的路由占位符后，就可以实现vue各个组件页面的切换了。还有一步很重要，那就是创建路由守卫，这个步骤需要在项目的根目录下创建router目录，然后在该目录创建index.js文件，具体代码如下：

//file:router/index.jsimport Vue from 'vue'import Router from 'vue-router'import Login from '../components/Login.vue'import Main from '../components/Main.vue'Vue.use(Router)const router = new Router({  routes: [    {      path: '/',      name: 'Login',      component: Login    },{  path: '/Login',  name: 'Login',  component: Login},{  path: '/Main',  name: 'Main',  component: Main},  ]})// 挂载路由导航守卫router.beforeEach((to, from, next)=>{console.log("to="+to.path)console.log("from="+from.path)// to 要访问的路径// from 从哪个页面而来// next 是一个函数,表示放行// next() 放行, next('/Login')强制跳转if(to.path === '/Login') return next()// 获取tokenlet userinfo = window.sessionStorage.getItem("userinfo")if(!userinfo) {return next({path:'/Login'})}console.log("userinfo1="+userinfo)let uu = JSON.parse(userinfo)//let uu = JSON.stringify(userinfo)console.log("username="+uu.name)next()})export default router

4、安装echarts

ECharts 是百度贡献的一个使用 JavaScript 实现的开源可视化库，涵盖各行业图表，满足各种需求，应用非常广泛，具体安装命令如下：

# 安装依赖npm install echarts -S# ORnpm install echarts --save

和其他插件的安装一样，需要在main.js中引入echarts，具体代码如下：

// main.jsimport Vue from 'vue'import App from './App.vue'import echarts from 'echarts'Vue.prototype.$echarts = echartsVue.config.productionTip = falsenew Vue({  render: h => h(App),}).$mount('#app')

使用echarts和在普通页面没有太大区别，具体代码如下：

5、网上开源的vue的中后台

https://github.com/d2-projects/d2-admin.githttps://github.com/PanJiaChen/vue-element-admin.githttps://github.com/iview/iview-admin.githttps://github.com/epicmaxco/vuestic-admin.githttps://github.com/taylorchen709/vue-admin.githttps://github.com/lin-xin/vue-manage-system.git