02---前端框架搭建

1、创建项目

1.该有的nodejs 、vue都要安装上，我用的是vuecli3，所以可以使用可视化界面 来创建项目（更加直观），当然你也可以采用命令行的方式创建项目。

2.cmd命令行输入： vue ui

3.在打开的可视化页面中，开始创建一个vue项目脚手架，插件可以先不勾选，到时候用什么再下，这里我选择的版本是vue2.0，而不是新版的3(因为3是最新版的有很多功能还不太熟悉，很多组件下载也不一样)，看个人习惯。

4.创建项目名vue的脚手架，用vscode打开这个项目（也可以用idea打开，不过我感觉前端用vscode，java代码用idea更清晰一点）

2、下载插件

1. 下载element-ui

• 在vscode打开的这个vue项目中，终端输入npm install element-ui --save

• 等待安装

• 下载好后，在main.js中配置依赖

  import Element from 'element-ui'
  import "element-ui/lib/theme-chalk/index.css"
  Vue.use(Element)
  

• 这样就可以使用elementui这个组件了

• 参考element官网：https://element.eleme.cn/#/zh-CN/component/installation

2. 下载Axious

• 在终端输入 npm install axios --save

• 下载后同样在main.js中配置

  import axios from 'axios'
  Vue.prototype.$axios = axios 
  

  ​

• 安装组件后，我们就可以通过 this.$axios.get () 来发起我们的请求了，和后端交互。

3、页面主体

直接在Home.vue里面修改

1. Home.vue

2. 创建一个公共样式,去除边框等

global.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.ml-5{
    margin-left: 5px;
}

.mr-5{
    margin-right: 5px;
}

.pd-10{
    padding:10px 0;
}

3. main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Element from 'element-ui'
import "element-ui/lib/theme-chalk/index.css"
import axios from 'axios'
import './assets/global.css'
import ElementUI from 'element-ui'
Vue.use(ElementUI,{size:"mini"});
Vue.prototype.$axios = axios 
Vue.config.productionTip = false

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

4. 运行，得到初步效果图

• 在终端输入 npm run serve
• 打开localhost：8080
• 如图

4、完善页面主体

• 加入搜索框
• 加入增删按钮
• 删除多余的导航框

1. 完整vue代码

Home.vue

2. 运行，如图

前端框架和主体页面搭建完成，后面就开始搭建后端框架