安装指导
介绍
简要介绍
Element,一套为开发者、设计师和产品经理准备的基于Vue 2.0的桌面端组件库。
编写语言:js
一句话概述:桌面端UI框架
建议的版本
- 建议使用版本为“2.0.0-rc.1”
- 由npm工具获取,命令为:npm i element-ui@next -D
安装
- 安装Element的依赖Node.js和npm。
- Element依赖于Node.js和npm,因此先安装Node.js和npm。
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
- 查看Node.js和npm的版本号,确保Node.js和npm安装成功。
回显信息如下,表示Node.js安装成功。
v10.16.0
npm -v
回显信息如下,表示npm安装成功。
6.9.0
- Element依赖于Node.js和npm,因此先安装Node.js和npm。
- 安装Element的依赖Vue。
- 确认完Node.js和npm安装好后开始安装Vue脚手架工具。
npm install -g vue-cli
ln -s /usr/local/src/node-v10.16.0-linux-arm64/bin/vue /usr/local/bin/vue
- 安装完成后确认Vue是否安装成功。
回显信息如下,则表示Vue安装成功。
Usage: vue <command> [options] Options: -V, --version output the version number -h, --help output usage information Commands: init generate a new project from a template list list available official templates build prototype a new project create (for v3 warning only) help [cmd] display help for [cmd]
- 确认完Node.js和npm安装好后开始安装Vue脚手架工具。
- 创建Vue项目。
- 创建一个Vue项目。
按照提示输入相关参数即可,示例如下,创建成功后会返回提示信息。
? 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
- 当前目录下会生成“testProject”目录,进入该目录,并执行启动命令。
cd testProject
npm run dev
终端返回“Your application is running here: http://localhost:8080”,则表示启动成功。
- 在默认配置情况下,Vue本地服务不能被外部IP访问,所以需要修改配置文件,修改步骤如下:
- 进入“testProject”目录。
- 修改“config/index.js” 的“host”属性为“0.0.0.0”。
1. { 2. // ..., 3. host: '0.0.0.0', 4. port: 8080, 5. // ... 6. }
- 修改“build/webpack.dev.conf.js”的“devServer”配置,增加一行“disableHostCheck: true,”。
1. devServer: { 2. clientLogLevel: 'warning', 3. historyApiFallback: true, 4. hot: true, 5. compress: true, 6. host: HOST || config.dev.host, 7. port: PORT || config.dev.port, 8. open: config.dev.autoOpenBrowser, 9. overlay: config.dev.errorOverlay 10. ? { warnings: false, errors: true } 11. : false, 12. publicPath: config.dev.assetsPublicPath, 13. proxy: config.dev.proxyTable, 14. quiet: true, // necessary for FriendlyErrorsPlugin 15. disableHostCheck: true, 16. watchOptions: { 17. poll: config.dev.poll, 18. } }
- 修改完配置文件后,重新执行命令,启动Vue。
- 启动后就可以通过IP访问,比如IP为“192.168.1.108”,在浏览器地址栏输入“http://192.168.1.108:8080”/即可访问,如图1所示。
- 创建一个Vue项目。
- 安装element-ui到项目下。
- 在3的项目“testProject”中,安装element-ui。
cd /usr/local/src/testProject
npm i element-ui@next -D
- 查看Element的版本号。
安装成功后,会在“/usr/local/src/testProject/node_modules”路径下生成“element-ui”文件夹。
进入该文件夹,在“package.json”文件中可查看element UI的版本号。
vi /usr/local/src/testProject/node_modules/element-ui/package.json
查找“version”内容,可查到以下版本信息。
"style": "lib/theme-chalk/index.css", "typings": "types/index.d.ts", "unpkg": "lib/index.js", "version": "2.0.0-rc.1" }
- 在3的项目“testProject”中,安装element-ui。
运行和验证
通过查看浏览器中的改动是否与编辑的一致,以此验证Element是否能正常使用。
- 进入项目,编辑“src”路径下的“App.vue”文件,其他文件不变。
vi /usr/local/src/testProject/src/App.vue
在原始文件上添加文本内容,如下:
<template> <div id="app"> <img src="./assets/logo.png"> <router-view/> <div class="block"> <span class="demonstration">start your element UI</span> </div> </div> </template> <script> export default { name: 'App' } </script> <style> #app { font-family: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
- 刷新浏览器页面,显示信息中最后一行增加文本“start your element UI”,如图2所示,则表示Element可正常使用。
