從無到有構建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頁面內容，如圖：