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