vue+elementUI+webpack一步步搭後臺管理系統

汪小蓉發表於2018-09-28

一、Vue-cli腳手架搭建基礎框架

1.檢視 node和npm是不是已經安裝好命令:

node -v  npm -v
複製程式碼

2.(沒有node安裝的先安裝環境);(安裝國內的淘寶映象檔案,後面的安裝npm可以全部改為cnpm)

npm install -g cnpm --registry=https://registry.npm.taobao.org 
複製程式碼

3.安裝 vue-cli

npm install -g vue-cli   
複製程式碼

(可以用 vue list 檢視相關的操作)

  1. 安裝 webpack模板
npm install -g webpack 
複製程式碼

5.新建vue專案

vue init webpack vuedemo
複製程式碼

。。。Enter鍵。。或者看情況選擇yes/no使用相關的配置,vuedemo---工程名字<工程名字不能用中文>;

webpack是完整版本,適合大型專案,目錄結構以及配置相對完整;webpack-simple簡化版本,適合小型練手。

6.進入專案目錄

cd vuedemo
複製程式碼

7.安裝依賴

npm install

複製程式碼

8.執行專案

npm run dev
複製程式碼

在瀏覽器中開啟相應地址

vue+elementUI+webpack一步步搭後臺管理系統

vue+elementUI+webpack一步步搭後臺管理系統

9.釋出專案

npm run build
複製程式碼

注:mac電腦需要在安裝淘寶映象前執行: sudo chown -R $USER /usr/local

相關文章