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

一，开发环境 ：

• 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 

进入主界面就证明成功啦