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

<template>
  <div id="app">
    <layout msg="this is layout!" /> //這里渲染
  </div>
</template>

<script>
import layout from './views/layout.vue' //這里加載

export default {
  name: 'app',
  components: {
    layout
  }
}

</script>

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

import Vue from 'vue'
import Router from 'vue-router'
import layout from './views/layout.vue'  //這里加載

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',  //設為默認訪問頁面
      name: 'layout',
      component: layout
    }
  ]
})

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

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

感覺iview響應式layout咋這么丑...