博客系统管理中心(1)-前端项目创建

前端项目创建：

（1）安装脚手架

(已经安装则cmd窗口输入vue -V，能够查看版本即可)

npm install -g @vue/cli

（2）创建项目(博客系统管理中心)

新建文件夹-E:\IDEAProjects\blogAdminDemo，拖拽到vscode.

（3）进入文件夹

E:\IDEAProjects\blogAdminDemo
在执行命令：npm run dev
(报错的话在该文件夹执行 npm install ，再执行 npm run dev)

（4）引入elementui

（1）推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。

npm i element-ui -S

或者

cnpm i element-ui -S

（2）在 main.js 中写入以下内容：
import Vue from ‘vue’;
import ElementUI from ‘element-ui’;
import ‘element-ui/lib/theme-chalk/index.css’;
import App from ‘./App.vue’;

Vue.use(ElementUI);

new Vue({
el: ‘#app’,
render: h => h(App)
});

以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。

（5）查看elementui官方文档，进行页面布局

（6）安装axios

cnpm install axios --save

（7）引入axios及使用（后面进行封装）

var axios = require(“axios”);
axios.get(‘https://api.coindesk.com/v1/bpi/currentprice.json’)
.then(response => {
console.log(response.data);
});

（8）解决跨域问题

(1)修改config文件夹的index.js，
(2)配置参数：跨域支持。
为了让后端能够访问到前端的资源，需要配置跨域支持。
在config\index.js 中，找到 proxyTable 位置，修改为以下内容

  proxyTable: {
      '/api': {
        target: 'http://localhost:8443',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
    }

eg:

 proxyTable: {
        '/user': {
          target: 'http://127.0.0.1:8080',
          //port:8081,
           ws: true,
          changeOrigin: true
        },  
    },