Mac上搭建vue项目

前言

最近在自学vue，记录一下搭建的过程。

原文链接

vue整体开发环境

Homebrew

Node.js

npm

webpack

vue-cli

1.安装brew

终端输入：

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

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

brew -v

2.安装node.js

终端输入：

brew install nodejs

也可以下载后安装：  下载地址：https://nodejs.org/en/download/

查看node.js版本信息：

node -v

3.获取node.js模块安装目录的访问权限

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

4.安装淘宝镜像

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

5.安装webpack

cnpm install webpack -g

6.安装vue脚手架vue-cli

npm install vue-cli -g

7.终端进入一个放置工程文件夹的目录

cd 目录路径

8.根据模版创建项目

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

会有一些初始化的设置：

Target directory exists. Continue? (Y/n)直接回车默认(然后会下载 vue2.0模板，这里可能需要连代理) 

Project name (vue-test)直接回车默认 

Project description (A Vue.js project) 直接回车默认

Author 写你自己的名字

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

cd demo1

9.安装项目依赖

npm install

比较慢，需要一些时间。。

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

cnpm install vue-router vue-resource --save

11.启动项目

npm run dev

注：启动项目步骤

cd objectname
cnpm install
cnpm run dev

成功执行以上命令后访问 http://localhost:8080/，输出结果如下所示：

参考资料：

关于 vue.js 运行环境的搭建（mac）

Vue2.0 新手入门 — 从环境搭建到发布

sudo npm 提示 command not found 的解决办法

mac安装webpack权限问题处理

解决mac安装homebrew后报错-bash: brew: command not found

npm WARN enoent ENOENT: no such file or directory, open ‘E:\Program Files\nodejs \package.json’ npm

推荐：

官方教程

菜鸟教程

Webpack 入门教程

Vue作者在weibo中推荐的Vue源码学习（或分析）的文章：Vue2.1.7源码学习

windows下搭建vue开发环境