This post includes the environment setup for Vue projects and creating Vue projects using Vue CLI. You can also find out how to store the preset of the Vue project settings and change the package manager.
Environment Setup
Check installation
Installation
1
2
3
4
5
6
| # make sure remove all vue cli
$ sudo npm uninstall --global vue-cli
$ sudo npm uninstall --global @vue/cli
# install the latest version of vue cli
$ sudo npm install --global vue
$ sudo npm install --global @vue/cli@latest
|
Update Vue version
1
| $ npm update -g @vue/cli
|
VSCode Extension
Vue Language Features (Volar)Vetur
Create Vue Project
Default Setup with Vue.js 3.x
1
2
3
4
5
6
| $ vue create <project_name>
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
|
Manual Setup
- By using manual setup, you can save the preset for the future projects
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| $ vue create <project_name>
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Standard
? 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: Basic
# In creating future project
$ vue create <project_name>
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
❯ Basic ([Vue 3] babel, router, vuex, eslint)
Default ([Vue 3] babel, eslint)
Default ([Vue 2] babel, eslint)
Manually select features
|
Choose Package Manager while creating project
At the very first time of creating a Vue project, Vue CLI asks which package manager will be used. This one time selection will be saved as a default setting and will create the future projects with the selected package manager. To change the package manager, there are two options.
- Add
--packageManager option in vue create command for one-time
1
| $ vue create project-name --packageManager=yarn
|
- Setup the
packageManager in .vuerc for permanant change
1
2
3
4
| {
"useTaobaoRegistry": false,
"packageManager": "yarn"
}
|
Reference