1、前端项目搭建

接下来就开始使用vue-cli来构建项目

1. 在硬盘上找一个文件夹放工程用的。这里有两种方式指定到相关目录：①cd 目录路径 ②如果以安装git的，在相关目录右键选择Git Bash Here
   我的安装目录为d:/vue,命令行状态进入上述目录

2. 安装vue脚手架输入：格式：vue init webpack 项目名称

   vue init webpack his

注意这里的“his ” 是项目的名称可以说是随便的起名，但是需要主要的是“不能用中文”。过程中eslint输入n，其他y

image.png

注意：中间有一项eslint选n

3 进入e:\vue\his目录，输入以入命令

cnpm install 
cnpm install vue-router vue-resource --save
cnpm install axios --save
cnpm install --save vue-axios
cnpm install qs 
cnpm install font-awesome
cnpm install element-ui -S

4 确认是否安装成功(axios同理)
查看配置文件package.json，是否有上述插件 ：

"dependencies": {
"axios": "^0.20.0",
"vue": "^2.5.2",
"vue-axios": "^2.1.5",
"vue-resource": "^1.5.1",
"vue-router": "^3.4.3"
},

第二步 编码

直接上main.js完整代码

1）main.js完整的代码如下

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//引入qs
import qs from 'qs';
Vue.prototype.$qs = qs;
//引入axios
//以下4行引入axios
import axios from 'axios'
import VueAxios from 'vue-axios'
axios.defaults.withCredentials = true //这个默认即为false，如果改为true，可以传递session信息，后端要做相应修改来放行，
Vue.prototype.$axios = axios //在vue中使用axios
//引图标
import 'font-awesome/css/font-awesome.css'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: {
    App
  },
  template: '<App/>'
})

测试

进入命令行状态运行

    npm run dev

浏览器输入http://localhost:8080/#/，出现如下页面即为成功

image.png