mac 安装 vue的环境 避免踩坑

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

环境安装

1.Mac OS系统安装 brew

打开终端运行以下命令:

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

2.

安装 nodejs

brew install nodejs

用 npm install [email protected] 更新 npm 版本报错:

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

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

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

Windows 下直接下载安装包即可

3.

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

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

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

4.安装淘宝镜像

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

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

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

sudo chown -R $USER /usr/local

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

5.安装webpack

cnpm install webpack -g

6.安装vue脚手架

npm install vue-cli -g

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

4 切换到你的项目目录

cd desktop/vue

5 新建vue项目

vue init webpack vuetest 

6 一路回车（第4步ESLint 可以一路n，大师请忽略n）
 

进入新建项目

cd vuetest 

cnpm install 

npm run dev

目录结构

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