使用vue-cli 搭建element-admin後臺

 

準備工做： node + npm + vue-cli

確保node安裝成功

一、終端查詢一下 node -v

二、使用命令全局安裝vue-cli

　　npm install -g vue-cli  

三、使用命令建立項目

　　 vue init webpack basics(項目名稱)

$ vue init webpack projectName -- 安裝vue-cli,初始化vue項目命令
? Target directory exists. Continue? (Y/n) y ------找到了projectName這個目錄是否要繼續
? Target directory exists. Continue? Yes
? Project name (projectName)---------------------項目的名稱（默認是文件夾的名稱），ps：項目的名稱不能有大寫，不能有中文，不然會報錯
? Project name projectName
? Project description (A Vue.js project)---------------------項目描述，能夠本身寫
? Project description A Vue.js project
? Author (king)---------------------項目建立者
? Author king
? Vue build (Use arrow keys)--------------------選擇打包方式，有兩種方式（runtime和standalone），使用默認便可
? Vue build standalone
? Install vue-router? (Y/n) y--------------------是否安裝路由，通常都要安裝
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n---------------------是否啓用eslint檢測規則，這裏我的建議選no，由於常常會各類代碼報錯，新手仍是不安裝好
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)--------------------是否安裝單元測試
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n) y)--------------------是否安裝e2e測試
? Setup e2e tests with Nightwatch? Yes

 建立完成

 使用命令 npm run dev運行

文件目錄

 

搭建admin後臺須要的依賴

axios、elementUI、sass、

首先安裝axios依賴，使用命令： 

npm install --save axios

而後在入口main.js文件中導入剛剛下載的依賴

import axios from 'axios'
import Qs from 'qs'       //QS是axios庫中自帶的，不須要再npm安裝
 
Vue.prototype.axios = axios;
Vue.prototype.qs = Qs;

 

 

 

在安裝elementUI  （兩種方式：按需引入、所有引入）這裏使用所有引入 省事。。。。

npm install element-ui -S

 

而後在入口main.js文件中導入剛剛下載的依賴

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

　　

 

 

在vue單頁面中使用此代碼驗證是否安裝成功

<el-row>
        <el-button>默認按鈕</el-button>
        <el-button type="primary">主要按鈕</el-button>
        <el-button type="success">成功按鈕</el-button>
        <el-button type="info">信息按鈕</el-button>
        <el-button type="warning">警告按鈕</el-button>
        <el-button type="danger">危險按鈕</el-button>
</el-row>

　　

 

 若是頁面出現按鈕有了樣式說明elementUI已經安裝成功了！

 

如今使用sass

使用命令

 

npm install --save-dev sass-loader   //sass-loader依賴於node-sass

npm install --save-dev node-sass

 

　　

 

 

在build文件夾下的webpack.base.conf.js的rules裏面添加配置

{
    test: /\.sass$/,
    loaders: ['style', 'css', 'sass']
 }

 

而後在頁面中使用一下代碼驗證sass是否安裝成功

<div class="testDemo">
        <ul>
            <li>
                <span>
                    <a href="">若是這裏有變化就說明sass安裝成功了哦</a>
                </span>
            </li>
        </ul>
 </div>

在style中添加樣式  （注：在style的標籤中要添加 lang=「scss」）

<style lang="scss">

$font-colr: red;
.testDemo {
    width: 100%;
    height: 50px;
    background: pink;
    ul {
        li {
            span {
                a {
                    color: $font-colr;
                    font-size: 20px;
                }
            }
        }
    }
}
</style>　　

頁面呈現

 

這就說明成功了。。。。。。 

 

若是期間出現一下這個問題

 

 說明安裝的依賴

sass-loader版本過高，去package.json文件中修改成  

"sass-loader": "^7.3.1" 便可

 

-----須要安裝的東西已經完畢-----

---

 如今項目須要配置一些東西才能更加快速的開發

npm run dev 後自動打開瀏覽器

在config中index.js文件找到

 

autoOpenBrowser: true

port: 8080,   更改端口號

 

使用cnpm

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

//驗證是否安裝成功

npm config get registry

//若是返回https://registry.npm.taobao.org，說明鏡像配置成功。

//全局安裝cnpm

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