Mac上安装node和使用vue-cli构建vue项目

╰+哭是因爲堅強的太久メ 2022-12-22 09:51 185阅读 0赞

**1、安装node**  
安装node，可以到Node 官网[nodejs.org][]，或者国内镜像[npm.taobao.org/mirrors/node][npm.taobao.org_mirrors_node]，下载最新版本的安装包。

我使用的国内镜像

![30d69fe45b9fdafa577e36387b2017ed.png][]

镜像列表

![756141eb5162eda42058c35efebcb69f.png][]

7.9.0版本镜像列表

*下载后点击安装，安装完成后，命令行执行下面的命令，确认是否安装成功。*

andedeMacBook-Pro:workspace andewang$ node -v
    v7.9.0
    andedeMacBook-Pro:workspace andewang$ 
    
    ps:Node 的模块管理器 npm 会一起安装好，不需要另外安装
    
    $ npm -v
    4.2.0
    
    
    如果版本太低，小于4.0，请执行下面命令升级(vue-cli需要npm版本大于4.0)
    $ npm install -g npm
    
    
    切换模块仓库到阿里的源(Node 的官方模块仓库网速太慢)
    $ 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

*安装成功后，vue命令查看*

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3ODcxODg4MzQ_size_16_color_FFFFFF_t_70][]

*使用vue list查看vue的模板*

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3ODcxODg4MzQ_size_16_color_FFFFFF_t_70 1][]

**3、生成项目**  
*使用webpack 模板生成一个vue的项目*

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3ODcxODg4MzQ_size_16_color_FFFFFF_t_70 2][]

过程总需要填写一些信息，项目名称、项目描述、是否需要安装vue-router、由于只是测试项目，unit test单元测试和ese tests 我选了no

**4.进入项目和安装依赖**

$cd test-vue

查看当前目录结构

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3ODcxODg4MzQ_size_16_color_FFFFFF_t_70 3][]

安装依赖

$npm install

安装成功后，可以发现多了一个node\_modules目录

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3ODcxODg4MzQ_size_16_color_FFFFFF_t_70 4][]

![e1cd005f33af80fa53d049aed0038115.png][]

**5、启动项目**

$ npm run dev
    
    > test-vue@1.0.0 dev /Users/andewang/workspace/test-vue
    > node build/dev-server.js
    
    > Starting dev server...
    
    
     DONE  Compiled successfully in 3041ms                                                                                   11:34:32
    
    > Listening at http://localhost:8080

浏览器查看效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3ODcxODg4MzQ_size_16_color_FFFFFF_t_70 5][]

另外，给大家介绍一款国内很实惠便宜的服务器运营商：

[https://www.didiyun.com/activity.html?invite=298tSgEjvtp\#annually][https_www.didiyun.com_activity.html_invite_298tSgEjvtp_annually]

[nodejs.org]: https://link.jianshu.com?t=https://nodejs.org/
[npm.taobao.org_mirrors_node]: https://link.jianshu.com?t=https://npm.taobao.org/mirrors/node
[30d69fe45b9fdafa577e36387b2017ed.png]: /images/20221120/1edfbc2c5ff64d8a89d805fb69808fef.png
[756141eb5162eda42058c35efebcb69f.png]: /images/20221120/b069012e21544f5fba8fc5e3b6810804.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3ODcxODg4MzQ_size_16_color_FFFFFF_t_70]: /images/20221120/0656d5413e6b420ca9b005f2b4b1375d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3ODcxODg4MzQ_size_16_color_FFFFFF_t_70 1]: /images/20221120/9c2434e633a5425bbda10e117a71c1fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3ODcxODg4MzQ_size_16_color_FFFFFF_t_70 2]: /images/20221120/d26c5809cd8a4d2a8addbf06f443ceff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3ODcxODg4MzQ_size_16_color_FFFFFF_t_70 3]: /images/20221120/3866a907384042bca78623c89c7ea3b4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3ODcxODg4MzQ_size_16_color_FFFFFF_t_70 4]: /images/20221120/d1522a37d9b84c328399d866cf5d36b6.png
[e1cd005f33af80fa53d049aed0038115.png]: /images/20221120/e91fa2061a16469eb6fa243002111f6d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2E3ODcxODg4MzQ_size_16_color_FFFFFF_t_70 5]: /images/20221120/3abafa0f4ba34461b889ad7e9eb7c081.png
[https_www.didiyun.com_activity.html_invite_298tSgEjvtp_annually]: https://www.didiyun.com/activity.html?invite=298tSgEjvtp#annually