從無到有建構vue實戰項目（二）

二、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')           

三、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頁面内容，如圖：