Vue可视化创建项目

1. 新建一个空的文件夹在新建文件夹里输入 cmd 并回车打开控制面板，如下图

2.控制面板中输入 vue ui 并回车

3.会自动打开可视化项目构建工具，如下图

4.点击创建按钮选择创建位置点击在此创建新项目

5. 输入全英项目名其他保持默认单击下一步

6.选择创建方式一般为手动创建单击下一步

7. 选择自己需要的配置 vue2一般为 Babel Router Vuex Linter/Formatter 使用配置文件单击下一步

8.选择vue版本默认为vue3.x 选择不使用历史模式选择Linter/Formatter菜单格式为 EsLint+Standard config 选择Pick additional lint... 为 Lint on save 单击创建项目

9.保存项目预设名保存预设并创建项目

---------------------------------------以上为创建新项目，也可直接导入----------------------------------------

10.创建好项目之后，在新项目的根目录中输入cmd，打开控制面板输入 vue ui 回车

11.配置组件库

选择插件 -> 添加插件 -> 搜索需要的插件(如：vue-cli-plugin-vant/element...) 选中所需插件 -> 安装 -> 配置插件(全局引入改为按需引入 import on demand) -> 点击完成安装

12.配置axios库

选择依赖 ->安装依赖 ->运行依赖中搜索axios -> 选中axios -> 安装axios

13.配置less依赖

选择依赖 ->安装依赖 ->开发依赖中搜索 less-loader 和 less -> 选中-> 安装若项目报错，则重新启动运行项目

14.初始化git仓库

15.启动API服务器

在Windows PowerShell（选中Windows右键）中cd + 项目名（cd e:as）切换到项目所在路径

然后输入npm install 安装所有依赖项 (npm i --legacy-peer-deps 强制安装依赖) -> 直接运行 node app.js

16.打开可视化项目构建工具选择任务 -> serve 点击运行 -> 启动app 即可运行项目

Vue可视化创建项目相关推荐

【Vue】—Vue脚手架创建项目时的 linter / formatter config配置选择
[Vue]-Vue脚手架创建项目时的 linter / formatter config配置选择 ESLint with error prevention only 只进行报错提醒 ESLint + ...
Vue脚手架创建项目流程
Vue脚手架创建项目流程图形化创建在创建文件的文件夹打开cmd, 按住shift右键打开黑窗口,或者直接在文件夹上面路径上面输入cmd 输入vue ui 会自己在浏览器打开点击创建项目项目文件 ...
vue脚手架安装以及vue脚手架创建项目（详细步骤）
系列文章: 文章目录 node.js安装 vue环境安装 vue创建项目命令行方式创建使用UI界面搭建 idea导入vue项目学习Vue不需要学会Node,Vue是前端框架,nodejs是服务端 ...
Vue初始化创建项目
Vue初始化创建项目 1.创建项目: 2.打开项目: 3.删除项目中的默认添加文件 4.添加自己的东西 4.1.初始化HTML中的代码: 4.2.使用视口缩放+rem的方式适配移动端. 4.3.运行查 ...
解决@vue/cli 创建项目是安装chromedriver时失败的问题
最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用工作中常见问题汇总及解决方案 npm install chrome ...
vue vue-cli创建项目步骤方法
1.全局安装vue-cli npm i -global vue-cli 2.创建项目 vue init webpack project // name 为项目名 3.cd到项目的目录下 cd ...
vue 手脚架创建项目
vue2 手脚架创建 npm init : 初始化 npm, 一直回车,会生成一个 package.json文件 vue init webpack vue2_demo2: 创建项目创建成功,项目结 ...
Vue+Cesium创建项目并加载地图全过程
目录一.创建vue项目准备工作 1.执行创建项目命令 2.项目名称 3.项目说明 4.作者描述 5. 编译方式 6.是否安装vue路由 7.是否使用ESLine 8.选择预设的ESLine规则 9. ...
vue vite创建项目的使用（使用技术栈vue3+vuex+router+ts+element plus）
文章目录前言创建vite项目 vite.config.ts配置自动化引入组件配置以及.env配置的引用创建src/vite-env.d.ts main.ts配置 api/request.ts ...

Vue可视化创建项目

Vue可视化创建项目相关推荐

最新文章

热门文章