mac 安装 vue的环境避免踩坑

落日映苍穹つ 2022-05-22 12:40 243阅读 0赞

在网上已经有许多类似的教程，主要写一下我在安装过程中遇到的一些问题。

## 环境安装 ##

### 1.Mac OS系统安装 brew ###

打开终端运行以下命令:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

## 安装 nodejs ##

> brew install nodejs

用 npm install npm@3.10.3 更新 npm 版本报错:

> (node:42) fs: re-evaluating native module sources is not supported.

解决办法:  
在官网下载6.70的安装包再安装一次(刚刚相当于帮你配置好环境变量，现在再安装一次升级到最新的 npm)

>  *  好像以前官网的安装包不会自动配置环境变量的，由于我电脑上之前安装过 nodejs 所以环境变量已经配置好了，不知道现在的安装包会不会自动配置环境变量。

Windows 下直接下载安装包即可

### 获取nodejs模块安装目录访问权限 ###

sudo chmod -R 777 /usr/local/lib/node_modules/

注意：在安装这一步时，需要在终端输入密码，电脑开机密码，密码在终端上不显示，输入正确后，回车即可。

## 4.安装淘宝镜像 ##

npm install -g cnpm --registry=https://registry.npm.taobao.org

在安装过程中遇到了以下错误：

![1085784-20171025100649191-750524842.png][]

原因及解决：淘宝镜像安装权限不够

sudo chown -R $USER /usr/local

然后再执行相关命令即可。

### 5.安装webpack ###

cnpm install webpack -g

### 6.安装vue脚手架 ###

npm install vue-cli -g

输入：vue，回车，若出现vue信息说明表示成功

![1103071-20170731213411693-1936432373.png][]

4 切换到你的项目目录

cd desktop/vue

5 新建vue项目

vue init webpack vuetest

6 一路回车（第4步ESLint 可以一路n，大师请忽略n）  
 ![1103071-20170731214105740-1809377076.png][]

进入新建项目

cd vuetest 
    
    cnpm install 
    
    npm run dev

![1103071-20170731214315646-111817109.png][]

![1103071-20170731214430615-221712398.png][]

![1103071-20170731214539740-1122948284.png][]

目录结构

![1103071-20170831155941765-598769679.png][]

*   main.js 是我们的入口文件，主要作用是初始化vue实例并使用需要的插件
 *  App.vue是我们的主组件，所有页面都是在App.vue下进行切换的。其实你也可以理解为所有的路由也是App.vue的子组件。所以我将router标示为App.vue的子组件。
 *  index.html文件入口
 *  src放置组件和入口文件
 *  node\_modules为依赖的模块
 *  config中配置了路径端口值等
 *  build中配置了
 *  webpack的基本配置、开发环境配置、生产环境配置等

[1085784-20171025100649191-750524842.png]: /images/20220522/f05c5663470041919a7b7576662454a2.png
[1103071-20170731213411693-1936432373.png]: /images/20220522/3d116b975caf4340b80978dbc84229a0.png
[1103071-20170731214105740-1809377076.png]: /images/20220522/b82ddd1f4d0741e7a82666e1ce74d39f.png
[1103071-20170731214315646-111817109.png]: /images/20220522/93f666eed2a2497bb4d24a5b2ec18387.png
[1103071-20170731214430615-221712398.png]: /images/20220522/f2c66871727348fc8d9d46f3c787db8f.png
[1103071-20170731214539740-1122948284.png]: /images/20220522/96b7cfe88b9545e2bf57bc59a77476f9.png
[1103071-20170831155941765-598769679.png]: /images/20220522/1a3ed317e96245aebfad6d935d8a8cee.png