node.js + vue-cli + element ui安裝教程

node.js + vue-cli + element ui安裝教程

一、安裝node.js

1、安裝包下載：http://nodejs.cn/download/

2、安裝node.js

點擊.exe文件，無腦next，選擇安裝目錄即可：

3、查看版本號及配置淘寶鏡像

以管理員身份 cmd 運行命令 node -v 和 npm -v:

原npm下載依賴速度過慢，這里需要使用淘寶的鏡像：

npm install -g cnpm --registry=https://registry.npm.taobao.org

4、配置 npm 的 全局模塊 global的路徑和 緩存 cache的路徑

4.1在node.安裝目錄下新建 node_global 和 node_cache 兩個文件夾

4.2、cmd執行以下兩個命令：

npm config set prefix "D:\tools\node\node_global"

npm config set cache "D:\tools\node\node_cache"

5、配置環境變量

環境變量 >> 系統變量 新建 NODE_PATH, 變量值為 node_modules 路徑

環境變量 >> 用戶變量 編輯 Path 變量下 的 node 變量值 為 global 路徑

驗證環境變量是否配置成功：cmd執行命令 npm config ls, global以及 cache路徑更新則配置成功：

至此， node.js 安裝完畢！

二、vue-cli 2.0版本安裝及創建項目

1、cmd 執行安裝命令：

npm install vue-cli -g

2、查看版本號：

vue -V

3.0 及以上版本的安裝命令如下，3.0版本與 element ui 存在兼容性問題，故此回退

#安裝3.0	
npm install @vue/cli -g

#卸載2.0
npm uninstall vue-cli -g

#卸載3.0
npm uninstall @vue/cli -g

3、創建 基於webpack的項目

3.1創建命令

#hellovue2為項目名
vue init webpack hellovue2

3.2選擇配置

基本上選擇默認配置即可完成創建：

3.3 啟動項目

#進入項目根目錄
cd hellovue2

然后

#啟動項目
npm run dev

復制路徑，瀏覽器訪問效果如下：

至此，一個vue項目創建完畢！

三、引入 Element ui

1、cmd 項目目錄下安裝 Element ui:

npm i element-ui -S

2、main.js寫入以下內容(全局引入）：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
import router from './router'

Vue.config.productionTip = false

Vue.use(ElementUI);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

3、引入組件

官網：https://element.eleme.cn/#/zh-CN/component/badge，引入組件時，會出現下圖錯誤，需在 <template>標簽下，添加 <div>標簽，將<el>標簽包含進來。

4、配置訪問路由

Badge.vue文件如下：

<template>
 <div>
   <el-row class="demo-avatar demo-basic">
       <el-col :span="12">
         <div class="sub-title">circle</div>
         <div class="demo-basic--circle">
           <div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
           <div class="block" v-for="size in sizeList" :key="size">
             <el-avatar :size="size" :src="circleUrl"></el-avatar>
           </div>
         </div>
       </el-col>
       <el-col :span="12">
         <div class="sub-title">square</div>
         <div class="demo-basic--circle">
           <div class="block"><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar></div>
           <div class="block" v-for="size in sizeList" :key="size">
             <el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
           </div>
         </div>
       </el-col>
     </el-row>
 </div>
</template>

<script>
export default {
  name: 'HelloBadge',
  data () {
    return {
      circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
      sizeList: ["large", "medium", "small"]
    }
  }
}
</script>

在router目錄的index.js下進行如下配置：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import HelloBadge from '../components/Badge.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/HelloBadge',
      name: 'HelloBadge',
      component: HelloBadge
    }
  ]
})

5、效果如下：

關於綠色圖片緣由：https://blog.csdn.net/weixin_43236610/article/details/82866518

至此，Element ui組件引入完畢！