vue开发环境搭建
1、安装node.jsnode.js官网下载地址:http://nodejs.cn/download/一直下一步傻瓜式安装即可(安装过程中会自动安装npm)。安装完成后node.js的环境变量会自动添加,命令行输入path查看:执行 node -v 和 npm -v 可查看node和npm的版本号:2、设置全局依赖包存放路径和缓存文件路径在nodejs安装路径下,新建node_global和nod
前言
node.js是javaScript脚本语言的运行环境。而npm则是Node.js的包管理工具(node package manager),相当于后台的maven。
为啥我们需要一个包管理工具呢?因为我们在Node.js上开发时,会用到很多别人写的JavaScript代码。 如果我们要使用别人写的某个包,每次都根据名称搜索一下官方网站,下载代码,解压,再使用,非常繁琐。于是一个集中管理的工具应运而生:大家都把自己开发的模块打包后放到npm官网上,如果要使用, 直接通过npm安装就可以直接用,不用管代码存在哪,应该从哪下载。 更重要的是,如果我们要使用模块A,而模块A又依赖于模块B,模块B又依赖于模块X和模块Y。npm可以根据依赖关系,把所有依赖的包都下载下来并管理起来。否则,靠我们自己手动管理,肯定既麻烦又容易出错。
1、安装node.js
node.js官网下载地址:http://nodejs.cn/download/
一直下一步傻瓜式安装即可(安装过程中会自动安装npm)。安装完成后node.js的环境变量会自动添加,命令行输入path查看:
执行 node -v 和 npm -v 可查看node和npm的版本号:
2、设置全局依赖包存放路径和缓存文件路径
在nodejs安装路径下,新建node_global和node_cache两个文件夹
执行如下命令,设置缓存文件路径
npm config set cache "D:\C\installPath\nodejs\node_cache"
执行如下命令,设置全局依赖包存放路径
npm config set prefix "D:\C\installPath\nodejs\node_global"
设置成功后,以后用命令 “npm install xxx -g” 安装依赖下载的依赖包就会存放在 D:\C\installPath\nodejs\node_global 目录
3、安装cnpm(淘宝镜像)
进入 C:\Windows\System32 找到cmd.exe,以管理员身份运行打开cmd窗口,执行如下命令:
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装成功后,进入如下目录:
执行cnpm -v,出现如下命令说明安装成功:
但是cnpm只在此路径识别,在别的路径执行cnpm命令会报:cnpm不是内部或外部命令
所以需要配置环境变量。在系统环境变量path后面追加:D:\C\installPath\nodejs\node_global
这样,在别的路径也可以执行cnpm命令了。
4、安装vue
安装命令(这里的-g是指安装到global全局目录去):
cnpm install vue -g
如果出现如下报错:
进入C:\Windows\System32目录,找到cmd.exe,以管理员身份运行打开cmd,然后执行cnpm install vue -g命令安装vue:
或者:
按Windows+R键,打开“运行”,然后输入“gpedit.msc" 打开组策略
在组策略里找到 计算机配置 => Windows设置 => 安全设置 => 本地策略 => 安全选项,在 安全选项 里找到 用户帐户控制 => 以管理员模式批准运行所有管理员 将这项禁用掉,如图:
5、安装vue-cli 脚手架
安装vue cli 2.0版本:
cnpm install vue-cli -g
安装vue cli 3.0版本:
cnpm install -g @vue/cli
6、使用vue-cli创建项目
使用vue cli 2.0创建项目:
vue init webpack projectName
使用vue cli 3.0创建项目:
vue create projectName
vue cli 3 创建 vue + typescript 项目:https://blog.csdn.net/sqf251877543/article/details/124008299
7、安装VsCode
VsCode下载地址:https://code.visualstudio.com/
国内下载vscode速度慢问题解决:
在浏览器或者下载软件中就可以看到这么一个下载地址了,将其复制下来(如下图箭头所指)
然后将红框内的部分更换为如下内容:
vscode.cdn.azure.cn
新的下载地址:
8、安装yarn
https://blog.csdn.net/sqf251877543/article/details/124008575
9.安装vite及vite创建项目
https://blog.csdn.net/sqf251877543/article/details/124008466
更多推荐
所有评论(0)