使用vuecli 快速创建vue3项目
文章目录一、安装最新vue-cli二、创建项目三、运行项目四、总结提示:以下是本篇文章正文内容,仅供参考一、安装最新vue-cli官方网址:https://cli.vuejs.org/关于旧版本Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x或 2.x),你需要先通过 npm uninstall vue-cli -g 或
提示:以下是本篇文章正文内容,仅供参考
一、安装最新vue-cli
关于旧版本
Vue CLI 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x
或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli
卸载它。
Node 版本要求
Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)。你可以使用 n,nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
可以使用下列任一命令安装这个新的包:
npm install -g @vue/cli
# OR
yarn global add @vue/cli
安装完成后,可以使用命令查看版本:
vue --version
如需升级全局的 Vue CLI 包,请运行:
npm update -g @vue/cli
# 或者
yarn global upgrade --latest @vue/cli
二、创建项目
执行以下命令
vue create hello-world
选择安装vue版本:
Please pick a preset:
Default ([Vue 2] babel, eslint)
> Default (Vue 3 Preview) ([Vue 3] babel, eslint)
Manually select features
如果你想快速安装vue3可以选择第二项;
下面我们选择第三项手动配置:
? 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)
>(*) Choose Vue version
(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
( ) Router
( ) Vuex
( ) CSS Pre-processors
(*) Linter / Formatter
( ) Unit Testing
( ) E2E Testing
您可以选择需要安装的插件,上下箭头移动,按空格键选中,按回车进入下一步
选择vue版本:选择3.x(Preview)
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
2.x
> 3.x (Preview)
进入下一步:选择eslint规则,这里我选择第三项:ESLint + Standard config
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
进入下一步:这里我们选择第一项 保存时验证
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
( ) Lint and fix on commit
进入下一步:配置将配置保存到哪里,我们选择保存在package.json
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
In dedicated config files
> In package.json
进入下一步:询问是否要将配置项保存,这里可以输入y/n
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? (y/N)
下一步就进入安装了,询问安装@vue/cli-plugin-babel版本,我们就选择默认 5.0.0-alpha.8
进入下一步:询问选择@vue/cli-plugin-eslint版本,回车默认
进入下一步:询问选择:@vue/cli-service版本,回车默认
进入npm install 安装包进度了:
三、运行项目
包安装完成后,可以运行命令预览
npm run serve
四、总结
提示:在安装过程中可能安装失败,提示:info There appears to be trouble with your network connection. Retrying…这是因为国内访问国外包下载不了,停止安装,可以使用cnpm淘宝镜像安装。
安装失败提示上面错误可以看【vue-cli 创建vue3项目遇到的问题及解决办法】
更多推荐
所有评论(0)