npm vue ivew vue-cli3

2019-4-10 10:56:20 星期三

學習iview時須要搭建一套node環境, 這裏記錄下來

 

1. 下載安裝nodejs  //自帶了npm包管理器

2. 設置npm的全局配置: 全局包默認安裝路徑, 全局緩存路徑 

3. npm全局安裝 vue-cli 3 // 能夠建立默認的項目目錄和文件, 好比包目錄node_modules, 插件目錄plugins, 源代碼目錄src, 以及package.json等省的手動建立了

4. npm全局安裝 vue cli server //他也屬於vue-cli, 是用來建立服務器的, 能夠經過在本地瀏覽器訪問localhost:8080來執行本地的js/HTML代碼

5. 經過vue-cli 建立項目的通用目錄(最好是在windows自帶的cmd命令窗口中執行命令): 
vue create helloworld //vue-cli的命令是vue,  這個命令會在當前文件夾中建立一個文件夾helloworld並建立出一些子文件夾和文件, 建立以前會有一些交互, 讓你選擇配置項, 使用默認的配置就行了

6. npm install iview --save //進入上一步建立好的 helloworld 文件夾, 並執行這個命令, 把iveiw安裝到本地的node_modules中

7. vue add vue-cli-plugin-iview //安裝iview官方的vue-cli3插件, 這個命令會修改main.js, 在當前的項目中經過引入iview插件來間接引入iview, 這個過程也會有交互, 讓你選擇是否是引入iview所有的包, 選擇語言等 (也能夠使用vue add iview命令, 這倆是同樣的)

8. npm run serve //啓動服務, 會有提示, 按照提示在瀏覽器中訪問localhost:8080就能夠訪問默認的歡迎頁面了

訪問 localhost:8080

 

另:

yarn //跟npm是同一個做用, 命令比npm簡單, 運行速度,下載速度比npm快, 說是下載的包跟npm是同一個源

工具性質的包, 好比 vue-cli webpack 是須要全局安裝的

依賴性質的包, 好比 須要在代碼中require的包 應該是安裝在當前項目中的

 

使用iview的一個佈局組件

目前默認的加載路徑是這樣的:  public/index.html-> src/main.js ->src/App.vue->components/HelloWorld.vue ,  咱們改寫app.vue, 讓其只加載iview的一個佈局組件

1. 安裝vue-router: vue add @vue/router

2. 從iview官網的佈局(layout)中拷貝一段佈局代碼, 存放到項目中的src/views中, 命名爲layout.vue

3. 改寫App.vue

 1 <template>
 2   <div id="app">
 3     <layout msg="this is layout!" /> //這裏渲染
 4   </div>
 5 </template>
 6 
 7 <script>
 8 import layout from './views/layout.vue' //這裏加載
 9 
10 export default {
11   name: 'app',
12   components: {
13     layout
14   }
15 }
16 
17 </script>

4. 修改App.vue同級目錄下的router.js, 將默認路由指向layout組件

 1 import Vue from 'vue'
 2 import Router from 'vue-router'
 3 import layout from './views/layout.vue'  //這裏加載
 4 
 5 Vue.use(Router)
 6 
 7 export default new Router({
 8   mode: 'history',
 9   base: process.env.BASE_URL,
10   routes: [
11     {
12       path: '/',  //設爲默認訪問頁面
13       name: 'layout',
14       component: layout
15     }
16   ]
17 })

5. 啓動服務器: npm run serve, 在瀏覽器裏訪問  http://localhost:8080/ 

原來帶有vue logo的歡迎頁面就變成這個樣子了, over.

感受iview響應式layout咋這麼醜...