使用VueCLI快速搭建TS+Vue工程
in 技术 with 0 comment

使用VueCLI快速搭建TS+Vue工程

in 技术 with 0 comment

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工程

https://suimz.com/post/13.html

作者

穗苗子

发布时间

2019-05-15

许可协议

CC BY 4.0

Responses