Mac系统下搭建vue开发环境

一 、环境搭建

1.首先安装brew

/usr/bin/ruby -e "$(curl -fsSL https://cdn.jsdelivr.net/gh/ineo6/homebrew-install/install)"

输入 brew -v 查看 brew 版本

2.安装 nodejs

方法一：

brew install nodejs

安装成功后，查看一下node.js的版本信息：

node -v

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

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

4、安装 淘宝镜像 （npm）

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

5、安装webpack

cnpm install webpack -g

6、安装vue脚手架

npm install vue-cli -g

7、在硬盘上找一个文件夹放工程用的，在终端中进入该目录

cd 目录路径

8、根据模板创建项目

vue init webpack 工程名字<工程名字不能用中文>
或
vue init webpack-simple 工程名字<工程名字不能用中文>

例如：vue init webpack demo1

会有一些初始化的设置，如下输入:

? Project name (vue_demo1)
项目名称

? Project description (A Vue.js project)
项目类型

? Author (RAKU [email protected])
作者

? Vue build (Use arrow keys)
选择 Runtime + Compiler: recommended for most users

? Install vue-router? (Y/n)
安装 Vue路由

? Use ESLint to lint your code? (Y/n)
是否使用ESlint（代码检查，根据自己需要安装）

? Set up unit tests (Y/n)
Unit测试

? Setup e2e tests with Nightwatch? (Y/n)
e2e测试

? Should we run npm install for you after the project has been created? (reco
mmended) (Use arrow keys)
是否在创建项目后使用 npm install 命令
我选择了 Yes, use NPM

cd 命令进入创建的工程目录

cd demo1

注意：最后三步都是要进入到当前工程目录后执行的。

9、安装项目依赖

npm install

比较慢，需要有点耐心……

10、安装 vue 路由模块vue-router和网络请求模块vue-resource

cnpm install vue-router vue-resource --save

11、启动项目

npm run dev

二、安装常用组件

1、安装网络请求组件axios

npm i axios vue-axios

必须到项目包目录下执行

![具体使用请移步到]https://blog.csdn.net/Janicecat/article/details/121693111

2、安装element-ui

npm i element-ui -S

![具体使用请移步到官网查看]https://element.eleme.cn/#/zh-CN/component/installation