1. 安装开发环境
sublime text3 https://www.sublimetext.com
开发前端代码时所用的编辑器,按个人习惯和喜好下载,编译程序直接使用系统终端运行,可以不与编译器有联系。(在此强推最近上手的vscode,也有各种vue和前端开发插件)
1. MacOS环境下可使用brew下载安装
2. 添加Emmet插件(html语法补全)和Vue Syntax Hightlight插件(vue语法高亮)
Node.js https://nodejs.org
Node.js是能够在服务器端运行JavaScript的运行环境,内置npm包管理器,方便管理项目依赖的各种模块,编译代码,可使用node -v和npm -v查看版本,我是用nvm一键安装配套的node和npm(MacOS环境下)
(1)安装nvm
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.1/install.sh | bash
(2)安装node及npm(node v8.0.0 (npm v5.0.0))
nvm install v8.0.0
(3)将镜像源设置为淘宝镜像(不换的话速度慢得要死,大家时间都很宝贵的,通过npm config get registry查看当前镜像地址)
npm config set registry https://registry.npm.taobao.org
(4)node的依赖模块默认在~/.nvm/versions/node/v8.0.0/lib/node_modules下
(5)测试Node和npm安装是否成功,安装Grunt
npm install -g grunt-cli
2. 安装全局模块
vue
npm install -g vue-cli
webpack
webpack是一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX)、coffee、样式(含less/sass)、图片等都作为模块来使用和处理
npm install -g webpack
PS:若~/.nvm/versions/node/v8.0.0/lib/node_modules
中已经有webpack了,说明在安装vue-cli的时候自动安装了,可以跳过这一步
3.新建&&编译&&运行项目
vue init webpack my-project
cd my-project
npm install
npm run dev
然后就可以在浏览器中打开http://localhost:8080
看效果了
参考
参考两个github库
- vue-cli+webpack简单搭建一个vue脚手架
- 使用vue+webpack+element搭建的后台管理系统模板https://github.com/bailicangdu/vue2-manage
网友评论