Visio Studio Code to build a Vue development environment

1. Install Visual Studio Code

It is a common practice to use Visual Studio Code (VS Code) to develop Vue.js applications. Here are the brief steps:

1. Install VS Code: If you have not installed Visual Studio Code, you can download and install it from the official website (https://code.visualstudio.com/).

2. Install the Vue.js plugin: Open VS Code, search and install the Vue.js plugin in the extension store. Commonly used plugins are "Vetur" and "Vue VS Code Extension Pack", which provide functions such as Vue syntax highlighting, code snippets, and auto-completion.

 

2. Install Vue dependencies

1. Install node:  You can download and install it from the official website (https://nodejs.org/zh-cn)

node -v
v18.17.0

# 安装了node之后，自动安装了npm
npm -v
9.6.7

2. Install cnpm

Note: If the permissions are not enough, switch to the root user

npm install cnpm -g --registry=https://registry.npm.taobao.org

cnpm -v
[email protected] (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)
[email protected] (/usr/local/lib/node_modules/cnpm/node_modules/npm/index.js)
[email protected] (/usr/local/bin/node)
[email protected] (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/local 
darwin arm64 22.1.0 
registry=https://registry.npmmirror.com

3. Install vue

npm install -g @vue/cli

vue -V
@vue/cli 5.0.8

3. Write a Vue application

vue create vue-01
cd vue-01

Note: If idea does not have permission to perform automatic compilation, execute permission: sudo chmod -R 777 ./vue-01