1、打开终端运行以下命令,在mac系统下安装brew:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2、mac OS 安装nodejs
brew install nodejs
3、获取nodejs模块安装目录访问权限
sudo chmod -R 777 /usr/local/lib/node_modules/
4、安装淘宝镜像:
犹豫npm在国内访问速度较慢,故建议使用淘宝镜像,区别在于下载的时候使用cnpm作为开头,如果对自己网络自信,可以不安装,开头使用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、在硬盘上随便找个位置存放文件,如果不指定位置,默认在用户名文件夹下Finder->用户名
cd 路径
8、根据模版创建项目(关键),博主在这里耗时非常久,创建webpack-simple导致最后运行的时候会报错,最后我不使用webpack-simple,而是选择直接使用webpack解决问题,新手建议还是使用webpakc-simple作为模版
vue init webpack-simple 工程名字<工程名字不能用中文>
如果新建项目为1.0,则使用:
vue init webpack-simple#1.0 工程名字<工程名字不能用中文>
会有一些初始化的设置,如下输入:Target directory exists. Continue? (Y/n)
直接回车默认(然后会下载 vue2.0模板,这里可能需要连代理)Project name (vue-test)
直接回车默认Project description (A Vue.js project)
直接回车默认Author
写你自己的名字
如果使用webpack,后面还会询问你是否安装检查工具或者sass,请自行决定。
9、进入工程目录
cd 工程名
10、安装项目依赖
npm install
cnpm install vue-router vue-resource --save
11、启动项目
npm run dev
如果弹出浏览器并展示VUE的logo,说明安装成功,或者输入localhost:8080,出现VUE的logo,都算成功!
最后附上简单的目录结构:
简单的目录结构:
|-index.html
|-main.js 入口文件
|-App.vue vue文件,官方推荐命名法
|-package.json工程文件(项目依赖、名称、配置)
|-webpack.config.jswebpack配置文件