Mac中如何搭建Vue项目并利用VSCode开发

一：安装nvm

nvm：node版本管理工具，可以根据项目需要切换使用不同的node和npm版本。
node.js：项目开发时需要的代码库，node里包含了npm，webpage等开发工具。提供了javascript运行环境，将vue代码进行解析和在调试时热更新到网页。
npm：是node.js的包管理工具。vue的安装和打包及依赖引入都需要使用npm。

官网：https://github.com/nvm-sh/nvm
控制台输入以下命令进行安装，安装成功后需要重启控制台

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash

输入：控制台nvm 显示Node Version Manager (v0.37.2) 代表安装成功

遇到问题1:github的DNS被污染

imac@imacdeMacBook-Pro ~ % curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
  0     0    0     0    0     0      0      0 --:--:-- --:--:-- --:--:--     0
curl: (7) Failed to connect to raw.githubusercontent.com port 443: Connection refused

解决方式：在本机的host文件中添加下列内容

199.232.68.133 raw.githubusercontent.com
199.232.68.133 user-images.githubusercontent.com
199.232.68.133 avatars2.githubusercontent.com
199.232.68.133 avatars1.githubusercontent.com

修改本机的host文件方法

1.打开Finder，按快捷键组合 Shift+Command+G 查找文件，输入/etc/hosts,确认前往

2.进入文件夹后，复制该文件到桌面，修改成功后保存，将原先的host文件替换掉即可

二：安装node.js

1:查看目前已有的node

如果在安装nvm之前，系统已经安装了Node.js，那么这个版本的Node.js将会成为system版本。此时，在Terminal里输入：nvm list，查看都安装了哪些node版本，会出现如下返回结果：

imac@imacdeMacBook-Pro ~ % nvm list
            N/A
iojs -> N/A (default)
node -> stable (-> N/A) (default)
unstable -> N/A (default)

上面返回的内容，代表，此时只有系统原来带的node版本，没有通过nvm安装任何的node版本。

2:安装最新node版本

1、控制台输入命令：

nvm install node

2、若安装是一直卡着不懂，可以将镜像源设置为淘宝镜像

export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node
npm --registry=https://registry.npm.taobao.org

3、安装成功（v15.7.0）显示效果：

nvm list   命令为查看当前安装的node版本
imac@imacdeMacBook-Pro ~ % nvm list        
    iojs-v3.3.1
->      v15.7.0
default -> iojs (-> iojs-v3.3.1)
unstable -> N/A (default)
node -> stable (-> v15.7.0) (default)
stable -> 15.7 (-> v15.7.0) (default)
iojs -> iojs-v3.3 (-> iojs-v3.3.1) (default)

三：安装VUE-Cli

控制台输入以下命令安装

1、切换模块仓库到阿里的源 
$ npm config set registry https://registry.npm.taobao.org/
 
执行下面的命令，确认是否切换成功
$ npm config get registry
https://registry.npm.taobao.org/
 
2、安装 vue-cli
选择全局安装
$ npm install -g vue-cli
3、查看安装是否成功

$ vue -V
2.9.6

四：创建项目

1、cd到存放项目的目录，用下列命令创建项目

vue3创建项目方式
vue create hello

vue2创建项目方式
vue init webpack hello

? Target directory exists. Continue? Yes
? Project name hello
? Project description A Vue.js project
? Author imac <luxiguang@curefun.com>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm

2、进入hello项目目录，运行项目

imac@imacdeMacBook-Pro hello % npm run dev

> hello@1.0.0 dev
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

 12% building modules 24/29 modules 5 active ...ts/myhouse/vusstudy/hello/src/App.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
 95% emitting                                                                        

 DONE  Compiled successfully in 2170ms                                                                                                  上午3:04:04

 I  Your application is running here: http://localhost:8080

3、浏览器输入http://localhost:8080就可以访问你创建的项目了。到此项目就创建完毕了直接用VSCode打开就成了

（注意：在编写代码的时候运行npm run dev命令的控制台需要一直开着，才能实现热更新看到最新的编辑效果 ）

4、其它

安装 vue 路由模块vue-router和网络请求模块vue-resource
$ cnpm install vue-router vue-resource --save

使用vue2创建项目方式遇到的问题

npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated bfj-node4@5.3.1: Switch to the `bfj` package for fixes and new features!
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated browserslist@2.11.3: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated extract-text-webpack-plugin@3.0.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated core-js@2.6.12: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3

解决方式：

npm install --save  -g core-js@^3