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

文章目录

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

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

1. 安装Node.js

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

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

bash 复制代码
# 切换国内淘宝镜像,使用淘宝镜像下载速度更快
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 文件夹,如下图:

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

bash 复制代码
npm config set prefix "G:\Program Files\nodejs\node_global"
npm config set cache "G:\Program Files\nodejs\node_cache"

3. 设置环境变量

环境变量 | 系统变量 | Path | 编辑 | 新建 | 复制粘贴 G:\Program Files\nodejs\node_global"

4. 查看 cnpm安装是否成功

bash 复制代码
在命令行输入指令 cnpm -v  查看 cnpm安装是否成功(安装成功才可以使用 cnpm)  

5. 安装 cnpm

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

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

方式1. 在 Vue-Cli脚手架官网 查找安装命令和版本,如:

bash 复制代码
npm install -g @vue/cli

方式2. 进入 Node.js 安装目录,使用 cnpm(所有的 npm 都可改用 cnpm ,cnpm 速度比 npm 快)

bash 复制代码
G:\Program Files\nodejs\cnpm install -g @vue/cli

三、Vue-Cli脚手架的使用

1. 创建helloworld项目实例

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


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

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

相关推荐
抹茶san几秒前
前端实战:从 0 开始搭建 pnpm 单一仓库(1)
前端·架构
Senar28 分钟前
Web端选择本地文件的几种方式
前端·javascript·html
烛阴1 小时前
UV Coordinates & Uniforms -- OpenGL UV坐标和Uniform变量
前端·webgl
姑苏洛言1 小时前
扫码小程序实现仓库进销存管理中遇到的问题 setStorageSync 存储大小限制错误解决方案
前端·后端
烛阴1 小时前
JavaScript 的 8 大“阴间陷阱”,你绝对踩过!99% 程序员崩溃瞬间
前端·javascript·面试
lh_12542 小时前
ECharts 地图开发入门
前端·javascript·echarts
jjw_zyfx2 小时前
成熟的前端vue vite websocket,Django后端实现方案包含主动断开websocket连接的实现
前端·vue.js·websocket
Mikey_n2 小时前
前台调用接口的方式及速率对比
前端
周之鸥2 小时前
使用 Electron 打包可执行文件和资源:完整实战教程
前端·javascript·electron
我爱吃朱肉2 小时前
HTMLCSS模板实现水滴动画效果
前端·css·css3