VUE（1）基本环境搭建

1.下载【node.js】和【H-builder】

2.【H-builder】--工具---插件安装---内置终端---普通项目---vue/2

3.【src】下新建【page】 , 【page】下新建 【home.vue】

4.【package.json】下的 【'dependencies'】依赖中引入 路由版号: 【"vue-router": "^3.1.3"】

"devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "less": "^4.1.3",
    "less-loader": "^7.3.0",
    "vue-router": "^3.6.5",
    "vue-template-compiler": "^2.6.10"
  }

   【安装cnpm】 sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

   【node_modules】--> 安装【vue_router】 sudo cnpm install vue-router@3  --save-dev

5.【src】下新建【router】，【router】下新建 【index.js】

import Vue from "vue";
import Router from "vue-router";

Vue.use(Router);



var router = new Router({
	mode:'history',
	routes:[
		{
		    path:"/login",
		    name:'login',
		    component:()=>import('../components/login.vue')
		},
	   ]
});

export default router;

6.【main.js】引入router

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import request from './utils/request.js'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios'


Vue.use(ElementUI)
Vue.prototype.$axios = axios

Vue.prototype.request = request
Vue.config.productionTip = false

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

7.【工程文件夹】右键--> 外部命令 --> npm run server

8.【工程文件夹】--> 安装【axios】npm install axios -s

9.【src】下新建【utils】，【utils】下新建【request.js】设置拦截器

import axios from 'axios'
import { Loading } from 'element-ui';
const URL = "http://localhost:8080"

let loadingInstance='';//接口请求时显示加载中

//创建axios实例，封装成request简写代码
const request = axios.create({
	baseURL: URL,
	timeout: 5000
})

// request 拦截器，可以对请求做一些处理，比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {
	// 开启加载效果，全屏加载
	loadingInstance = Loading.service({ fullscreen: true})

	config.headers['Content-Type'] = 'application/json;charset=utf-8';
	// config.headers['token'] = user.token;  // 设置请求头
	return config
}, error => {
	return Promise.reject(error)
});

// response 拦截器,可以在接口响应后统一处理结果
request.interceptors.response.use(
	response => {
		// 关闭加载效果
		loadingInstance.close()
		if (response.status == 200) {
			return response.data
		}
		return -1;
	},
	error => {
		console.log('err' + error)
		return Promise.reject(error)
	}
)
export default request

10.【main.js】引入rquest

11.【node_modules】文件夹下--> 安装【 less-loader】npm install -D less less-loader@7.3.0