伺服器elementUI安裝手冊

一、軟體介紹

Element UI是餓了麼前端團隊推出的一款基於Vue 2.0的桌面端UI框架。

二、支援版本和獲取方式

1.建議使用版本為“2.0.0-rc.1”

2.由npm工具獲取，命令為：npm i element-ui@next -D

三、編譯和測試方式

1.選擇操作環境

本文選用麒麟伺服器V10版本做測試安裝element-ui-2.0.0-rc.1版本

伺服器詳細規格如下：

2.配置編譯環境

步驟一：安裝Element UI的依賴nodejs和npm

（1）Element UI依賴於nodejs和npm，因此先安裝nodejs和npm。

cd /usr/local/src

wget https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-arm64.tar.xz

tar -xvf node-v10.16.0-linux-arm64.tar.xz

ln -s /usr/local/src/node-v10.16.0-linux-arm64/bin/node /usr/local/bin/node

ln -s /usr/local/src/node-v10.16.0-linux-arm64/bin/npm /usr/local/bin/npm

（2）檢視nodejs和npm的版本號，確保nodejs和npm安裝成功。

node -v

回顯資訊如下，表示nodejs安裝成功。

npm -v

回顯資訊如下，表示npm安裝成功。

步驟二：安裝Element UI的依賴Vue

（1）確認完nodejs和npm安裝好後開始安裝Vue腳手架工具。

npm install -g vue-cli

ln -s /usr/local/src/node-v10.16.0-linux-arm64/bin/vue /usr/local/bin/vue

（2）安裝完成後確認Vue是否安裝成功。

vue

回顯資訊如下，則表示Vue安裝成功。

步驟三：建立Vue專案

（1）建立一個Vue專案。

vue init webpack testProject

按照提示輸入相關引數即可，示例如下，建立成功後會返回提示資訊。

? Project name test
? Project description A Vue.js project
? Author te
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project
has been created? (recommended) npm

vue-cli ·
Generated "testProject".


# Installing project dependencies ...
...
# Project initialization finished!
# ========================
To get started:
cd testProject
npm run dev

（2）當前目錄下會生成“testProject”目錄，進入該目錄，並執行啟動命令。

cd testProject

npm run dev

終端回返如下資訊，則表示啟動成功

（3）在預設配置情況下，Vue本地服務不能被外部IP訪問，所以需要修改配置檔案，修改步驟如下：

a.進入“testProject”目錄。

b.修改“config/index.js” 的“host”屬性為“0.0.0.0”。

{
// ...,
host: '0.0.0.0',
port: 8080,
// ...
}

c.修改“build/webpack.dev.conf.js”的“devServer”配置，增加一行“disableHostCheck: true,”。

devServer: {
clientLogLevel: 'warning',
historyApiFallback: true,
hot: true,
compress: true,
host: HOST || config.dev.host,
port: PORT || config.dev.port,
open: config.dev.autoOpenBrowser,
overlay: config.dev.errorOverlay
? { warnings: false, errors: true }
: false,
publicPath: config.dev.assetsPublicPath,
proxy: config.dev.proxyTable,
quiet: true, // necessary for FriendlyErrorsPlugin
disableHostCheck: true,
watchOptions: {
poll: config.dev.poll,
}
}

（4）修改完配置檔案後，重新執行命令，啟動Vue。

npm run dev

（5）啟動後就可以通過IP訪問，比如IP為“192.168.1.108”，在瀏覽器位址列輸入“http://192.168.1.108:8081”/即可訪問，如下圖所示。

步驟四：安裝element-ui到專案下

（1）在步驟三：建立Vue專案的專案“testProject”中，安裝element-ui。

cd /usr/local/src/testProject

npm i element-ui@next -D

（2）檢視Element UI的版本號。

安裝成功後，會在“/usr/local/src/testProject/node_modules”路徑下生成“element-ui”資料夾。

進入該資料夾，在“package.json”檔案中可檢視element UI的版本號。

vi /usr/local/src/testProject/node_modules/element-ui/package.json

查詢“version”內容，可查到以下版本資訊。

3.測試已完成編譯的軟體

通過檢視瀏覽器中的改動是否與編輯的一致，以此驗證Element UI是否能正常使用。

（1）進入專案，編輯“src”路徑下的“App.vue”檔案，其他檔案不變。

vim /usr/local/src/testProject/src/App.vue

在原始檔案上新增文字內容，如下：

（2）重新整理瀏覽器頁面，顯示資訊中最後一行增加文字“start your element UI”，則表示Element UI可正常使用

4.已知問題彙總

問題描述：

在測試已完成編譯的軟體中建立Vue專案時，下載chromedriver時出現異常，如下所示：

# Installing project dependencies ...
# ========================

npm WARN deprecated [email protected]: Deprecated. Please use https://github.com/webpack-contrib/mini-css-ext
ract-plugin
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated [email protected]: I wrote this module a very long time ago; you should use something else.
npm WARN deprecated [email protected]: Please use the native JSON object instead of JSON 3
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated [email protected]: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket da
ta flow and an import issue introduced in 2.1.0
npm WARN deprecated [email protected]: use String.prototype.padStart()

> [email protected] install /usr/local/src/testProject/node_modules/chromedriver
> node install.js

/usr/local/src/testProject/node_modules/chromedriver/2.46/chromedriver is not writable: EACCES: permission denied, mkdir '/us
r/local/src/testProject/node_modules/chromedriver/2.46'
/usr/local/src/testProject/node_modules/chromedriver/2.46/chromedriver is not writable: EACCES: permission denied, mkdir '/us
r/local/src/testProject/node_modules/chromedriver/2.46'
Current existing ChromeDriver binary is unavailable, proceding with download and extraction.
Downloading from file: https://chromedriver.storage.googleapis.com/2.46/chromedriver_linux64.zip
Saving to file: /tmp/2.46/chromedriver/chromedriver_linux64.zip

問題原因：無法正常下載chromedriver。

解決方法：

（1）手動設定npm中下載chromedriver的地址。

cd /usr/local/src

npm config set chromedriver_cdnurl https://npm.taobao.org/mirrors/chromedriver

（2）設定完成後，先刪除之前未建立成功的Vue專案，之後再建立Vue專案即可。

rm -rf testProjec