Article directory
- 1. Environment preparation for Vue-Cli scaffolding
- 2. To install the Vue-Cli scaffolding, just execute one line of commands.
- 3. Use of Vue-Cli scaffolding
1. Environment preparation for Vue-Cli scaffolding
1. Install Node.js
1-1 Go to Node.js official website to download the installation package and modify the installation path to another disk, such as G:\Program Files
1-2 Install npm Taobao image to speed up
# 切换国内淘宝镜像,使用淘宝镜像下载速度更快
npm config set registry https://registry.npm.taobao.org
# 查看当前镜像使用的地址,返回成功,则代表设置成功
npm config get registry
2. Set the download path and cache path of cnpm
2-1 Manually create new node_cache and node_global folders under the installation directory G:\Program Files\nodejs, as shown below:
2-2 Adjust the directory: Enter respectively on the command line
npm config set prefix "G:\Program Files\nodejs\node_global"
npm config set cache "G:\Program Files\nodejs\node_cache"
3. Set environment variables
Environment Variables | System Variables | Path | Edit | New | Copy and Paste G:\Program Files\nodejs\node_global”
4. Check whether the cnpm installation is successful
在命令行输入指令 cnpm -v 查看 cnpm安装是否成功(安装成功才可以使用 cnpm)
5. Install cnpm
# 在命令行输入如下指令,安装cnpm:
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 【注意】:cnpm的安装路径是 G:\Program Files\nodejs\node_global\node_modules\cnpm\bin
2. To install the Vue-Cli scaffolding, just execute one line of commands.
Method 1. Find the installation command and version on the Vue-Cli scaffolding official website , such as:
npm install -g @vue/cli
Method 2. Enter the Node.js installation directory and use cnpm (all npm can be used instead, cnpm is faster than npm)
G:\Program Files\nodejs\cnpm install -g @vue/cli
3. Use of Vue-Cli scaffolding
1. Create helloworld project instance
# 1. 在要创建工程的目录下,打开控制台,输入如下指令 :
vue create helloworld
# 2. 控制台下,按照提示进入工程目录:
cd helloworld
# 3. 按照提示运行项目,如下图1
cnpm run serve
# 4. 打开控制台的项目地址,浏览器访问如下图2
2. Create a project with Vue-Cli scaffolding [Vue official website]
Vue-Cli scaffolding official website creates new project reference