Vue项目创建

约 523 字大约 2 分钟

2024-06-07

Vue2&Vue3项目创建

Vue CLI

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。可以快速创建vue2与vue3项目。

基于webpack构建构建。
如果安装vite+vue3项目，该工具不适用。

安装Vue CLI

npm install -g @vue/cli

如下：

PS C:\Users\YEVIN\Desktop> npm install -g @vue/cli
...
...
...

changed 853 packages in 48s

验证是否安装成功

vue --version

如下：

PS C:\Users\YEVIN\Desktop> vue --version

@vue/cli 5.0.8

命令创建

命令创建

vue create vue-demo

- 选择Vue版本，通过上下键选择，回车确认

Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
> Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Manually select features

选择Vue版本

✨  Creating project in E:\前端开发\vue-demo.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


added 872 packages in 19s

100 packages are looking for funding
  run `npm fund` for details
🚀  Invoking generators...
📦  Installing additional dependencies...


added 89 packages in 4s

112 packages are looking for funding
  run `npm fund` for details
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project vue-demo.
👉  Get started with the following commands:

 $ cd vue-demo
 $ npm run serve

创建成功，进入项目

cd vue-demo

启动项目

npm run serve

如下：启动成功

 DONE  Compiled successfully in 3249ms                             21:56:12

  App running at:
  - Local:   http://localhost:8081/
  - Network: http://192.168.2.12:8081/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

访问项目

Vue UI 创建

Vue UI 启动

vue ui

如下：

PS E:\前端开发> vue ui
(node:6724) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
🚀  Starting GUI...
🌠  Ready on http://localhost:8000

启动成功会自动打开浏览器

界面创建

点击再此创建新项目输入项目名，点击下一步点击选择预设，或者自己手动配置项目，创建项目创建成功

运行项目

点击下图所示，运行项目点击启动APP，跳转到新建项目页面创建运行成功