Vue UI 创建Vue前端工程(Windows)

Vue ui 创建Vue前端工程

    • 1.开启vue ui 服务
    • 2.访问 vue ui 界面
    • 3.创建项目
    • 4. 添加 element-ui 插件
    • 4.添加依赖
    • 4.启动 Vue 项目
    • 5.访问 Vue 项目

1.开启vue ui 服务

快捷键 win+r 打开 cmd 输入下面命令

vue ui

2.访问 vue ui 界面

打开浏览器,地址栏输入 localhost:8080

3.创建项目

点击创建
在这里插入图片描述
选择你要创建的项目目录,点击 在此创建新项目
Vue UI 创建Vue前端工程(Windows)_第1张图片
输入项目名称,包管理器选择 npm, git 命令填写 init project , 点击下一步
Vue UI 创建Vue前端工程(Windows)_第2张图片
选择手动
Vue UI 创建Vue前端工程(Windows)_第3张图片

把format 去掉, 选中 router, 选中使用配置文件, 点击下一步
Vue UI 创建Vue前端工程(Windows)_第4张图片
点击创建项目

Vue UI 创建Vue前端工程(Windows)_第5张图片

点击创建项目,不保存预设

Vue UI 创建Vue前端工程(Windows)_第6张图片

4. 添加 element-ui 插件

先点击左侧导航栏 插件,再点击右上角 添加插件
Vue UI 创建Vue前端工程(Windows)_第7张图片
**搜索 element ,先选中 如图矩形框中的内容,版本不一致没关系, 再点击右下角 安装 **
Vue UI 创建Vue前端工程(Windows)_第8张图片
**安装完成后点击 完成安装 **
Vue UI 创建Vue前端工程(Windows)_第9张图片

4.添加依赖

  1. 添加 axios 依赖
    点击左侧导航条 依赖Vue UI 创建Vue前端工程(Windows)_第10张图片
    点击右上角 安装依赖
    在这里插入图片描述
    搜索框输入 axios ,选中内容如图所示, 再点击 右下角的 安装
    Vue UI 创建Vue前端工程(Windows)_第11张图片

  2. 安装 less-loader 依赖
    如上图一样,搜索框中输入 less-loader,再点击右下角安装
    Vue UI 创建Vue前端工程(Windows)_第12张图片

3.安装 less 依赖
如上图一样,搜索框中输入 less,再点击右下角安装
Vue UI 创建Vue前端工程(Windows)_第13张图片

到这里所有安装都结束了,接下来启动 Vue 项目

4.启动 Vue 项目

如图操作即可
Vue UI 创建Vue前端工程(Windows)_第14张图片

5.访问 Vue 项目

浏览器地址栏输入 localhost:8080
如果界面和下图一样说明成功
Vue UI 创建Vue前端工程(Windows)_第15张图片

你可能感兴趣的:(vue,vue)