Vue学习之Vue结合 ElementUI 组件库搭建Web工程项目

创建Vue项目

打开cmd命令行界面，创建一个全新的vue项目，我们命名为hello-vue，这里附上ElementUI网址如下：ElementUI

# 使用 webpack 打包工具初始化一个名为 hello-vue 的工程
vue init webpack hello-vue

NPM 安装相关组件依赖时可能会遇到权限问题，此时使用 PowerShell 管理员模式运行即可；开始菜单 -> 鼠标右击 -> Windows PowerShell (管理员)

安装依赖

我们需要安装 vue-router、element-ui、sass-loader 和 node-sass 四个插件

# 进入工程目录
cd hello-vue
# 安装 vue-router
npm install vue-router --save-dev
# 安装 element-ui
npm i element-ui -S
# 安装 SASS 加载器
npm install sass-loader node-sass --save-dev

安装其他相关依赖

注意一定要先进入到hello-vue目录中

npm install

启动工程

npm run dev

启动成功，浏览器输入：http://localhost:8080 如下图：

经过整个，目前实现了登录的表单验证功能，主页显示功能，路由转发功能，以及VueX。

先将项目源码发到这里，提供大家下载，免费的！！

Vue学习之Vue结合 ElementUI 组件库搭建Web工程项目