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

前端项目创建：

（1）安装脚手架

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

npm install -g @vue/cli

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

新建文件夹-E:IDEAProjectslogAdminDemo，拖拽到vscode.

（3）进入文件夹

E:IDEAProjectslogAdminDemo 在执行命令：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)配置参数：跨域支持。 为了让后端能够访问到前端的资源，需要配置跨域支持。 在configindex.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
        },  
    },