Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,利用它,可以快速搭建 Vue 工程。
Vue CLI 官网:点击跳转
安装 Vue CLI
确保你的电脑上已经安装了Node.js
在CMD中执行安装命令:
npm install -g @vue/cli
创建工程
在CMD中进入你要存放工程文件的目录,执行创建命令:
vue create project-name
选择 > Manually select features
$ vue create project-name
Vue CLI v4.5.9
? Please pick a preset:
Default ([Vue 2] babel, eslint)
Default (Vue 3 Preview) ([Vue 3] babel, eslint)
> Manually select features
移动至 >( ) TypeScript
,按空格选择,再按回车确定
Vue CLI v4.5.9
? 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
这里选择 > 2.x
Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
3.x (Preview)
剩余的配置可选
Vue CLI v4.5.9
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Linter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? Yes
? Save preset as:
自动开始创建项目
Vue CLI v4.5.9
✨ Creating project in F:\Develop\workspace\Html\project-name.
🗃 Initializing git repository...
⚙️ Installing CLI plugins. This might take a while...
创建成功,使用IDE打开工程目录即可
.... 省略日志
success Saved lockfile.
Done in 11.70s.
⚓ Running completion hooks...
📄 Generating README.md...
🎉 Successfully created project project-name.
👉 Get started with the following commands:
$ cd project-name
$ yarn serve
工程运行脚本
npm run serve
使用VueCLI快速搭建TS+Vue工程