搭建前端Vue开发环境(基于Visual Studio Code)

本文简介

搭建基于Visual Studio Code(VsCode)的Vue开发环境.

目标用户:

前端(Vue)初学者

操作步骤

1. 1. 
      
2. 下载node并安装
   ​
3. 安装nrm（用于切换npm环境）
   1. 
      

npm install nrm -g

3. 查看依赖仓库列表

nrm ls

如果报错：

internal/validators.js:124
    throw new ERR_INVALID_ARG_TYPE(name, 'string', value);
    ^
[TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
  at validateString (internal/validators.js:124:11)
  at Object.join (path.js:402:7)
  at Object.<anonymous> (C:\Users\jerry\AppData\Roaming\npm\node_modules\nrm\cli.js:17:20)

按照报错提示，用记事本打开文件cli.js，修改

const NRMRC = path.join(process.env.HOME, '.nrmrc');

为

const NRMRC = path.join(process.env.USERPROFILE, '.nrmrc');

4. 修改默认仓库地址
   因为默认使用的国外仓库地址比较慢，修改为淘宝的仓库地址，这样速度快一些。

nrm use taobao

5. 5. 
      
6. 下载并安装Visual Studio Code
   
   
7. 安装插件
   5. 
      

• • 
    
• 安装插件Vetur
  
• 安装插件ESLint
  
  • 
    

7. 安装vue

npm install vue -g
npm install vue-router -g
npm install -g @vue/cli

8. 新建vue工程

vue create hspbc

9. 运行vue工程

cd hspbc
yarn serve

10. 访问web

打开浏览器访问： http://localhost:8080

11. 用VSCODE打开工程即可进行开发