搭建一个VUE2项目（本项目引用element-UI）

参考上篇文章新建一个VUE2的项目。

接下来，给项目安装一些必要的依赖:element-UI、axios和route

首先，element-UI的安装，方便开发者快速搭建页面，在项目路径下的控制台中输入：

E:\Vue\my_project>npm i element-ui -S

安装成功后，在项目的main.js中引入element-UI和使用指令

import Vue from 'vue'
import ElementUI from 'element-ui';
import "element-ui/lib/theme-chalk/index.css";
import App from './App.vue'

Vue.config.productionTip = false
Vue.use(ElementUI);//使用指令

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

以上，element-UI就成功引入项目，具体组件可参考官网：Element - 网站快速成型工具

其次，是axios的安装，用来实现后端接口的调用，在项目路径下的控制台中输入：

E:\Vue\my_project>npm install axios

安装成功后，在项目的main.js中引入axios

import Vue from 'vue'
import ElementUI from 'element-ui';
import "element-ui/lib/theme-chalk/index.css";
import axios from 'axios';//引入axios
import App from './App.vue'

Vue.config.productionTip = false
Vue.use(ElementUI);

new Vue({
  axios,//这里不能忘了
  render: h => h(App),
}).$mount('#app')

然后，是router的安装，用来实现前端页面跳转 ，在项目路径下的控制台中输入：

E:\Vue\my_project>npm install vue-router@3

安装成功后，在项目的main.js中引入router：

import 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';
import router from '@/router';
import VueRouter from 'vue-router';

Vue.config.productionTip = false
Vue.use(ElementUI);
Vue.use(VueRouter);//使用指令

new Vue({
  axios,
  render: h => h(App),router//这里也有
}).$mount('#app')

在src文件夹下新建一个文件夹router，在router中新建文件index.js ，这里，我还新建了views文件夹，用于存放写的页面。

页面跳转规则写在index.js中，index.js可以参考以下代码：

//导入路由
import Vue from "vue";
import VueRouter from "vue-router";
//导入页面组件
import HomeIndex from "@/views/home/homeIndex"
//定义组件路由
Vue.use(VueRouter);
var router = new VueRouter({
    routes:[
        {
            path: "/",
            redirect: "/HomeIndex",
          }, //默认路由
          {
            path: "/HomeIndex",
            name: "HomeIndex",
            component: HomeIndex,
          }
    ]
})
//导出路由对象
export default router;

以上，项目框架基本完成，但是后端接口调用时，还会涉及跨域问题。

当我们遇到请求后台接口遇到 Access-Control-Allow-Origin 时，那说明跨域了。

跨域是因为浏览器的同源策略所导致，同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，同源是指：域名、协议、端口相同。具体如何解决，下次再说~