在Windows下搭建Vue开发环境

一、在Windows下搭建Vue开发环境1.安装node.jsnode.js-v12.18.31.1. 安装流程2.设置node的全局和缓存路径2.1.新建文件目录在安装目录中，如我的：C:\Program Files\nodejs，新建两个文件夹，分别是：node_cache（缓存）、node_global（全局）2.2.设置缓存路径win+r --> cmd --> npm con

langxiong_1009

3483人浏览 · 2022-04-11 19:48:27

langxiong_1009 · 2022-04-11 19:48:27 发布

一、在Windows下搭建Vue开发环境

1.安装node.js

node.js-v12.18.3
$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zlz0Sim1-1649677355875)(C:\Users\lol\AppData\Roaming\Typora\typora-user-images\image-20220411162940523.png)]$

1.1. 安装流程

在这里插入图片描述

2.设置node的全局和缓存路径

2.1.新建文件目录

在安装目录中，如我的：C:\Program Files\nodejs，新建两个文件夹，分别是：node_cache（缓存）、node_global（全局）

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9D4JmOVn-1649677355877)(C:\Users\lol\AppData\Roaming\Typora\typora-user-images\image-20220411163817566.png)]$

2.2.设置缓存路径

win+r --> cmd --> npm config set cache "C:\Program Files\nodejs\node_cache"

2.3.设置全局模块存放路径

win+r --> cmd --> npm config set prefix "C:\Program Files\nodejs\node_global"

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eYiRe4AR-1649677355878)(C:\Users\lol\AppData\Roaming\Typora\typora-user-images\image-20220411165212698.png)]$

3.设置淘宝镜像

以管理员身份打开命令提示符窗口 --> npm install -g cnpm --registry=https://registry.npm.taobao.org

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rRe4PNIt-1649677355879)(C:\Users\lol\AppData\Roaming\Typora\typora-user-images\image-20220411165929813.png)]$

4.设置环境变量

设置环境变量的目的在于：在任何目录都可以执行node和vue命令

在环境变量中，Path里面新增一个global文件夹的路径，如：C:\Program Files\nodejs\node_global

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-atIikOtn-1649677355879)(C:\Users\lol\AppData\Roaming\Typora\typora-user-images\image-20220411170302400.png)]$

同时新增一个环境变量：NODE_PATH，路径为node.js目录下的modules文件夹

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-E7MGSAxr-1649677355879)(C:\Users\lol\AppData\Roaming\Typora\typora-user-images\image-20220411170615399.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XXtvSIye-1649677355880)(C:\Users\lol\AppData\Roaming\Typora\typora-user-images\image-20220411170514775.png)]$

5.安装Vue

需要先关上命令行窗口，并再次打开cmd执行安装vue的命令（管理员打开）

cnpm install vue -g

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rL9WJQHf-1649677355881)(C:\Users\lol\AppData\Roaming\Typora\typora-user-images\image-20220411170909792.png)]$

6.安装Vue-cli脚手架

执行cnpm install -g vue@cli

报错后执行：

npm i npm -g

npm i @vue/cli -g

cnpm i @vue/cli -g

7.创建vue项目

vue create first 接下来回车即可

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-48aAhhUl-1649677355881)(C:\Users\lol\AppData\Roaming\Typora\typora-user-images\image-20220411172200181.png)]$

cd first

npm run serve

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hfaZRARG-1649677355881)(C:\Users\lol\AppData\Roaming\Typora\typora-user-images\image-20220411172343772.png)]$

8.访问已测试是否创建运行成功

http://localhost:8080/

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ocWWpPHW-1649677355881)(C:\Users\lol\AppData\Roaming\Typora\typora-user-images\image-20220411172439448.png)]$

二、Vue-cli脚手架3.0前后版本切换

1. 3.0以下切换至3.0以上

npm uninstall -g vue-cli  //卸载当前vue
npm install -g @vue/cli	//安装vue
//如果上面代码报错，则执行以下代码
//以下代码进行更新操作
npm i npm -g
npm i @vue/cli -g
cnpm i @vue/cli -g

2. 3.0以上切换至3.0以下

npm uninstall -g @vue/cli	//卸载当前vue
npm install -g vue-cli	//安装vue

npm i vue-cli -g
cnpm i vue-cli -g

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^