如何在电脑上配置Vue开发环境

2024-09-18 17:35:36

一，开发环境：

Node JS（npm）
Visual Studio Code（前端IDE）

安装NodeJS 下载地址： nodejs中文网
Visual Studio Code 官网下载地址 https://code.visualstudio.com/
官网文档：https://code.visualstudio.com/docs
简书教程：https://www.jianshu.com/p/990b19834896

二，如何安装NodeJS ：

到官网下载自己系统对应的版本
下载完成后解压把Node添加到系统环境变量里面
打开cmd命令行：输入node -v，验证node安装；输入npm -v，验证node包
管理器npm的安装升级npm sudo npm install npm -g #linux系统 npm install npm -g # windows系统

三，npm使用淘宝镜像：

npm 使用的是国外中央仓库，下载速度非常不乐观
像 Maven 有国内镜像一样，npm 在国内也有镜像可用强烈建议使用淘宝镜像，命令行执行命令 npm install -g cnpm --registry=https://registry.npm.taobao.org
安装成功后用 cnpm 替代 npm 命令即可

四，安装 Yarn替代npm

Yarn是Facebook发布的node.js包管理器，比npm更快、更高效，可以使用其替代npm
安装Yarn，命令行执行：
- npm i yarn -g --verbose
切换Yarn资源地址为淘宝镜像，命令行执行
- yarn config set registry https://registry.npm.taobao.org
Yarn跟npm命令关系
- npm install => yarn install
- npm install --save [package] => yarn add [package]
- npm install --save-dev [package] => yarn add [package] --dev
- npm install --global [package] => yarn global add [package]
- npm uninstall --save [package] => yarn remove [package]
- npm uninstall --save-dev [package] => yarn remove [package]

五，下载各种工具：

安装打包工具 webpack，-g 表示全局安装
- npm install webpack -g
安装 vue 脚手架项目初始化工具vue-cli
- npm install vue-cli -g

六，创建项目

设置工作区，新建文件夹即可（不能有中文目录）
创建项目
- vue init webpack <项目名称>
进入到项目根目录
- cd <项目名称>
安装依赖包
- yarn install #最快
- npm install
- cnpm install
运行项目
- npm run dev
浏览器访问 http://localhost:8080

进入主界面就证明成功啦

最新文章

热门文章