Create a project with Vite
Vite is a construction tool developed by the team led by Mr. You Yuxi, the author of Vue. It takes advantage of the browser's native support for ES modules, which greatly improves the development experience. Since the release of version 2.0 in January 2021, it has developed very fast. The author I also participated in contributing some documents and plug-ins for the first time, and during 2021, personal projects have been fully switched to Vite, and the company's business has also started to use Vite to create new projects at the end of 2021. The overall situation is very stable and the prospects are very optimistic.
The following methods for creating Vite projects are recommended: Create Vite, Create Vue and Create Preset.
Create Vite
Create Vite is a scaffolding tool officially recommended by Vite, which can create basic templates of different technology stacks based on Vite.
Run the following command to create a template project, and then follow the prompts on the command line (select vue technology stack to enter), you can create a basic empty project based on Vite.
npm create vite
However, the projects created in this way are very basic. If you need to use programs such as Router, Vuex, ESLint, etc., you need to install and configure them separately, so Create Preset is recommended.
Create Vue
Create Vue is a new scaffold officially launched by Vue to replace the Webpack-based Vue CLI, which can create Vite-based Vue basic templates.
Run the following command to create a template project, and then follow the prompts on the command line.
npm init vue@3
Create Preset
Create Preset is the CLI scaffolding of Awesome Starter, which provides the ability to quickly create preset projects. It can create some interesting and practical project startup templates, and can also be used to manage common project configurations.
easy to use
You can create configurations directly through the package manager, and then follow the prompts on the command line to create out-of-the-box template projects.
npm create preset
Select the technology stack to enter here vue , and select vue3-ts-vite to create a project startup template based on Vite + Vue 3 + TypeScript.
If the download fails, you can
npm create preset proxy ondownload it by enabling the accelerated mirror proxy.
Global installation
It can also be installed locally locally like using @vue/cli, and preset init create projects through commands.
It is recommended to install it globally, it is more convenient to use, please install it globally first:
npm install -g create-preset
You can check whether the installation was successful with the following command, and if successful, you will get a version number:
preset -v
Then you can --template directly specify a template to create the project through the option, here use vue3-ts-vite the template to create a hello-vue3 project named:
preset init hello-vue3 --template vue3-ts-vite
Commonly used project templates can also be bound as local configurations. Click Create Preset Official Documentation to view the complete usage tutorial.
Create a project using @vue/cli
If you are not used to Vite, you can still use Vue CLI as a development scaffold.
The difference with Vite
The build tool used by Vue CLI is based on Webpack.
Update CLI scaffolding
Please install globally first, and update the scaffolding to the latest version (the minimum version must be above 4.5.6 to support the creation of Vue 3 projects).
npm install -g @vue/cli
Create a 3.x project using the CLI
After the Vue CLI is installed globally, you can enter it on the command line vue to operate. The command used to create a project is create :
vue create hello-vue3
Since you want to use TypeScript, you need to select the last option for custom matching, and switch the selection through the up and down arrows of the keyboard:
Vue CLI v5.0.4
? Please pick a preset:
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
> Manually select features
In the multi-select menu, you can press the space to select the required dependencies, and the following options are selected in total:
Vue CLI v5.0.4
? 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
Select the Vue version, you need to use Vue 3 so you need to choose 3.x:
? Choose a version of Vue.js that you want to start the project with
(Use arrow keys)
> 3.x
2.x
Whether to choose the template of Class syntax. In Vue 2 version, in order to better support TypeScript, it is usually necessary to use Class syntax. Since Vue 3 has a Composition API that supports TypeScript more highly, so choose, that is, "No" n :
? Use class-style component syntax? (y/N) n
Babel can convert the new version of the JavaScript statement to a lower version of Polyfill with better compatibility, so choose to y confirm the use:
? Use Babel alongside TypeScript
(required for modern mode, auto-detected polyfills, transpiling JSX)?
(Y/n) y
The next step is to select the routing mode, choose y to enable the History mode, and choose n to use the Hash mode, which can be selected according to the project situation.
It is recommended to select Confirm first y . If you encounter deployment problems, you can check how to deal with them in the deployment problems and server configuration section of the "Routing" chapter.
? Use history mode for router?
(Requires proper server setup for index fallback in production)
(Y/n) y
You can choose a CSS preprocessor according to your own preferences. However, since Less is commonly used in open source community components , it is also recommended to choose Less as an entry-level preprocessor tool.
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported
by default):
Sass/SCSS (with dart-sass)
> Less
Stylus
Lint rules are used for code checking. Lint is inseparable from writing TypeScript. You can choose according to your preferences, or you can choose the default first. Later, in the section Adding Collaboration Specifications , it will also explain how to configure the rules. Here, the first one is defaulted first:
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
Lint's verification timing, one is to verify when saving, and the other is to verify when submitting commit. The default is also selected here:
? Pick additional lint features: (Press <space> to select,
<a> to toggle all, <i> to invert selection, and <enter> to proceed)
>(*) Lint on save
( ) Lint and fix on commit
The project configuration file, the author is more accustomed to saving it as a separate file:
? Where do you prefer placing config for Babel, ESLint, etc.?
(Use arrow keys)
> In dedicated config files
In package.json
Whether to save it as a future project configuration, save it for quick creation in the future:
? Save this as a preset for future projects? Yes
? Save preset as: vue-3-ts-config
At this point, the project creation is complete! It can be developed and debugged by npm run serve enabling the hot update, and npm run build launched by building and packaging.