Vue学习之Vue结合 ElementUI 组件库搭建Web工程项目
  JMz8bAJYIKmC 2023年12月10日 30 0


创建Vue项目

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

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

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


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

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


安装其他相关依赖

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

npm install
启动工程
npm run dev

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


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

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


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

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


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


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

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


【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年12月10日 0

暂无评论

JMz8bAJYIKmC