1.构建 node 下载环境
在 nodejs 官网下载 node 并且安装 nodejs 在 wind10(推荐下载长期支持版)下载地址:https://nodejs.org/zh-cn/download/current/
完成安装后打开电脑的 cmd 测试 node 环境:
出现以上显示表示 node 环境已经构建好了。
2.换淘宝的源提升下载速度
cmd 中输入命令:
1 | npm install -g cnpm –registry=https://registry.npm.taobao.org |
下载完成后,输入测试命令:
1 | cnpm -v |
出现以上显示表示换源成功,以后在用到 npm 的地方就用 cnpm 就好了,可提升效率
3.搭建 vue 前端框架环境:
在 cmd 中输入命令:
1 | cnpm install --global vue-cli |
等待下载完成,速度很快,大概 30 秒
测试 vue 是否搭建完成:
显示版本号即搭建 vue 框架完成(注意 vue 和 cli 与中间的-要有空格)
4.新建 vue 框架项目
1.打开集成环境(我这里用的是 WebStorm)
打开后,点击左下角的 Terminal 进入 cmd 命令框输入命令:
1 | vue init webpack element-test |
vue init webpack +项目名,我这里用 element-test 为例
说明:
Vue build ==> 打包方式,回车即可;
Install vue-router ==> 是否要安装 vue-router,项目中肯定要使用到 所以 Y 回车;
Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车;
Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车;
Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车;
使用到的下载工具,我这里以 npm 为例
等待安装 vue 项目即创建了 vue 框架项目:
2.测试 vue 框架项目是否搭建成功
打开 cmd 控制台
- 打开项目所在位置的文件夹
- 运行 cnpm start
点击访问网址: http://localhost:8081,显示
表示项目构建成功!
5.使用 element-ui 框架
1.安装 element 框架依赖
在 cmd 控制台输入
1 | cnpm i element-ui -S |
安装完毕
2.在 main.js 中引入 element-ui
main.js 在(你的项目)\src 文件夹下,我这里是 element-test\src\
1 | import Vue from 'vue' |
如上图,引入并使用 element-ui
3.element-ui 的使用实例
1.在 src\components 的目录下新建一个组件(这里以 Button.vue 为例)
2.注册 Button.vue 组件
在 src\router\index.js 中写入 import Button from “../components/Button”; 路由 组件 如下图:
3.修改 App.vue 文件
4.引入 element-ui 样式(进入element-ui 官网可使用其他大量组件)
修改 Button.vue 文件,写入以下代码:
1 | <el-row> |
保存在运行此项目(在控制台使用 cnpm start)
点击超链接
即成功引用 element-ui 框架
6.总结
1.安装 nodejs
2.在 cmd 中:
1.换源 :npm install -g cnpm –registry=https://registry.npm.taobao.org
2.安装 vue:
1 | cnpm install --global vue-cli |
3.新建 vue 框架项目(切换至 WS 控制台)
1 | vue init webpack element-test |
4.下载 element-ui 依赖
1 | cnpm i element-ui -S |
5.修改 main.js 文件
1 | import Vue from 'vue' |
重点看//后面的注释