Vue-Cli脚手架的安装和使用

逃离我推掉我的手 2024-03-17 21:52 53阅读 0赞

#### 文章目录 ####

*  一、Vue-Cli脚手架的环境准备
 *   *  1. 安装Node.js
     *   *  1-1 去 \[Node.js官网\](https://nodejs.org/zh-cn/) 下载安装包，修改安装路径到其它盘，如 G:\\Program Files
         *  1-2 安装npm淘宝镜像，提速
     *  2. 设置 cnpm的下载路径和缓存路径
     *   *  2-1 在安装目录 G:\\Program Files\\nodejs 下手动新建 node\_cache 和 node\_global 文件夹，如下图:
         *  2-2 调整目录：在命令行分别输入
     *  3. 设置环境变量
     *  4. 查看 cnpm安装是否成功
     *  5. 安装 cnpm
 *  二、Vue-Cli脚手架的安装，执行一行命令即可
 *   *  方式1. 在 \[Vue-Cli脚手架官网\](https://cli.vuejs.org/zh/guide/) 查找安装命令和版本，如：
     *  方式2. 进入 Node.js 安装目录，使用 cnpm（所有的 npm 都可改用 cnpm ，cnpm 速度比 npm 快）
 *  三、Vue-Cli脚手架的使用
 *   *  1. 创建helloworld项目实例
     *  2. Vue-Cli脚手架创建一个项目【Vue官网】

## 一、Vue-Cli脚手架的环境准备 ##

### 1. 安装Node.js ###

#### 1-1 去 [Node.js官网][Node.js] 下载安装包，修改安装路径到其它盘，如 G:\\Program Files ####

#### 1-2 安装npm淘宝镜像，提速 ####

# 切换国内淘宝镜像，使用淘宝镜像下载速度更快
    npm config set registry https://registry.npm.taobao.org 
    # 查看当前镜像使用的地址，返回成功，则代表设置成功
    npm config get registry

### 2. 设置 cnpm的下载路径和缓存路径 ###

#### 2-1 在安装目录 G:\\Program Files\\nodejs 下手动新建 node\_cache 和 node\_global 文件夹，如下图: ####

![在这里插入图片描述][7dd0b9cc92594951aa4267a27d234c0f.jpeg_pic_center]

#### 2-2 调整目录：在命令行分别输入 ####

npm config set prefix "G:\Program Files\nodejs\node_global"
    npm config set cache "G:\Program Files\nodejs\node_cache"

### 3. 设置环境变量 ###

### 4. 查看 cnpm安装是否成功 ###

在命令行输入指令 cnpm -v  查看 cnpm安装是否成功（安装成功才可以使用 cnpm）

![在这里插入图片描述][25f08bd65b5841ab8a4c33a6036fb8c8.jpeg_pic_center]

### 5. 安装 cnpm ###

# 在命令行输入如下指令，安装cnpm： 
    npm install -g cnpm --registry=https://registry.npm.taobao.org
    #	【注意】：cnpm的安装路径是 G:\Program Files\nodejs\node_global\node_modules\cnpm\bin

![在这里插入图片描述][7122f30bf1ba4dd182acb0add6f1cc1e.jpeg_pic_center]

## 二、Vue-Cli脚手架的安装，执行一行命令即可 ##

### 方式1. 在 [Vue-Cli脚手架官网][Vue-Cli] 查找安装命令和版本，如： ###

npm install -g @vue/cli

### 方式2. 进入 Node.js 安装目录，使用 cnpm（所有的 npm 都可改用 cnpm ，cnpm 速度比 npm 快） ###

G:\Program Files\nodejs\cnpm install -g @vue/cli

## 三、Vue-Cli脚手架的使用 ##

### 1. 创建helloworld项目实例 ###

# 1. 在要创建工程的目录下，打开控制台，输入如下指令 ：
    vue create helloworld
    # 2. 控制台下，按照提示进入工程目录：
    cd helloworld
    # 3. 按照提示运行项目，如下图1
    cnpm run serve
    # 4. 打开控制台的项目地址，浏览器访问如下图2

![图1：运行Vue项目][1_Vue]  
![浏览器访问Vue脚手架创建的项目][Vue]

### 2. Vue-Cli脚手架创建一个项目【Vue官网】 ###

[Vue-Cli脚手架官网创建新项目参考][Vue-Cli 1]

[Node.js]: https://nodejs.org/zh-cn/
[7dd0b9cc92594951aa4267a27d234c0f.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/372c788dd23e47ff82a9a620d119d4a2.png
[60c139d87dc242bbad2faec4d8d4c104.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/ad102467577e45779d084391ad7ef0b6.png
[25f08bd65b5841ab8a4c33a6036fb8c8.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/cf9821781d2c4614a2201ef427ab2873.png
[7122f30bf1ba4dd182acb0add6f1cc1e.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/919cfa24946447ab8f16096aef5d00b2.png
[Vue-Cli]: https://cli.vuejs.org/zh/guide/
[1_Vue]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/e49ea199ec3348658df1dce8583b70b4.png
[Vue]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/b3d2dcfadfe14932b7a9a7ed97aa944d.png
[Vue-Cli 1]: https://cli.vuejs.org/zh/guide/creating-a-project.html