从无到有构建vue实战项目（二）

2、vue项目的初步搭建

1. 该项目我采用了当下最流行的vue ui框架---element-ui，首先用vue-cli构建一个vue项目:

   vue create education

   而后会出现一系列配置选项，此时一直回车就好：

   而后进入项目文件夹，输入:

   npm run serve

   出现以上状况，则说明运行成功，此时，在浏览器打开连接http://localhost:8080/，会看到以下界面：

2. 而后安装element-ui（必定要在该项目根目录下安装）：

   npm i element-ui -s

3. 将element-ui引入本身的项目：

   #main.js
   import Vue from 'vue'
   import App from './App.vue'
   import ElementUI from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';
   
   Vue.use(ElementUI);
   Vue.config.productionTip = false
   
   new Vue({
     render: h => h(App),
   }).$mount('#app')

3、vue-router的安装和基本配置

1. 用如下命令安装：

   npm install vue-router

   出现了warning，不用理会

2. 而后将其引入项目中：

   import VueRouter from 'vue-router'
   
   Vue.use(VueRouter)

3. 当我在配置路由时，将App.vue设为首页时，router-view从新渲染了一遍，这是由于，App.vue是一个入口文件，全部页面都是在App.vue下进行切换的，因此将App.vue设为首页时，router-view会从新渲染一遍App.vue页面内容，如图：