当前位置：首页 > ai >正文

vue项目创建流程

ai 2025/7/27 9:50:16

首先，需要先安装node.js和npm，详见如下链接

https://blog.csdn.net/zlpzlpzyd/article/details/147704723

安装vue-cli

cli全称是command line interface，用于快速搭建vue项目的一个工具。

github项目链接

https://github.com/vuejs/vue-cli

在这里可以看到目前最新的vue-cli发布版本

vue官网链接

https://cli.vuejs.org/zh/

执行命令

npm install -g @vue/cli
# OR
yarn global add @vue/cli

不指定版本的话，默认最新版，指定版本的话在组件后面加上@版本号

npm install -g @vue/cli@5.0.8

指定-g（global的首字母）和不指定的区别是

指定了-g，下载的组件库版本全局生效，多个项目使用同一版本
未指定-g，局部生效，下载的组件库在执行命令行的项目，下载的组件库版本只在当前项目中

在大多数情况下，推荐优先使用局部安装（不使用 -g），除非确实需要跨多个项目使用某个工具或库。这样可以更好地管理项目的依赖关系，避免潜在的冲突和版本问题。

查看组件最新版本信息命令

npm view @vue/cli

@vue/cli@5.0.8 | MIT | deps: 35 | versions: 172
Command line interface for rapid Vue.js development
https://cli.vuejs.org/keywords: vue, clibin: vuedist
.tarball: https://registry.npmmirror.com/@vue/cli/-/cli-5.0.8.tgz
.shasum: 97b2bad9cb331dcffdd4fbe8532bdeacd2441166
.integrity: sha512-c/QKPdC09bYkW22m/boXkLaiz10z0Z2WHZO7zEeNdfSduqyWINZhKc6hVQU3Vk0NXW7BJAd7zWmcUrC8L9TuAA==
.unpackedSize: 158.6 kBdependencies:
@types/ejs: ^3.0.6                @vue/cli-ui-addon-widgets: ^5.0.8 debug: ^4.1.0                     envinfo: ^7.7.4                   ini: ^2.0.0                       js-yaml: ^4.0.0
@types/inquirer: ^8.1.3           @vue/cli-ui: ^5.0.8               deepmerge: ^4.2.2                 fs-extra: ^9.1.0                  inquirer: ^8.0.0                  leven: ^3.1.0
@vue/cli-shared-utils: ^5.0.8     boxen: ^5.0.0                     download-git-repo: ^3.0.2         globby: ^11.0.2                   isbinaryfile: ^4.0.6              lodash.clonedeep: ^4.5.0
@vue/cli-ui-addon-webpack: ^5.0.8 commander: ^7.1.0                 ejs: ^3.1.6                       import-global: ^0.1.0             javascript-stringify: ^2.0.1      lru-cache: ^6.0.0
(...and 11 more.)maintainers:
- yyx990803 <yyx990803@gmail.com>
- akryum <guillaume.b.chau@gmail.com>
- soda <haoqunjiang+npm@gmail.com>dist-tags:
latest: 5.0.8  next: 5.0.6published over a year ago by soda <haoqunjiang+npm@gmail.com>

查看全局安装的包

npm list -g

可以看到，vue-cli的版本为5.0.8

+-- @vue/cli@5.0.8
+-- corepack@0.29.4
+-- npm@10.9.0
+-- ts-node@10.8.1
`-- typescript@4.7.4

创建vue项目

命令如下

vue create example

输出内容如下

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

箭头移动到Manually select features，然后按下enter，输出内容如下

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>(*) Babel( ) TypeScript( ) Progressive Web App (PWA) Support( ) Router( ) Vuex( ) CSS Pre-processors(*) Linter / Formatter( ) Unit Testing( ) E2E Testing

默认选中了Babel和Linter / Formatter，按下空格取消，选中TypeScript，然后按下enter，输出内容如下

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: TS
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x2.x

选择3.x，然后按下enter，输出内容如下

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: TS
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? (y/N)

输入n，然后按下enter，输出内容如下

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: TS
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (y/N)

输入n，然后按下enter，输出内容如下

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: TS
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config filesIn package.json

选择In dedicated config files，然后按下enter，输出内容如下

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: TS
? Choose a version of Vue.js that you want to start the project with 3.x
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? No
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N)

输入n，然后按下enter，输出内容如下

Vue CLI v5.0.8
✨  Creating project in E:\frontend\example.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...added 694 packages in 18s96 packages are looking for fundingrun `npm fund` for details
🚀  Invoking generators...
📦  Installing additional dependencies...added 15 packages in 3s97 packages are looking for fundingrun `npm fund` for details
⚓  Running completion hooks...📄  Generating README.md...🎉  Successfully created project example.
👉  Get started with the following commands:$ cd example$ npm run serve

到此，完整流程结束。

查看全文

http://www.xdnf.cn/news/16154.html