使用vue.js写代码也有一段时间了,目前也有同事在学习vue.js学习,但是环境搭建还是会遇到一些坑,所以整理了下vue.js的环境搭建。后续会陆续退出相关控件封装,欢迎关注啊。。。
由于本人是mac系统,所以下面以mac系统为例,说明环境搭建
vue.js官网建议用npm安装,因为node继承了npm,所以一般情况下我们会先安装node.js环境,node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动,也是目前最快的javascrip引擎。如果系统没有安装node.js环境,需要先安装node.js环境,
检测node.js是否安装命令如下
//如果安装了,则会显示版本号,否则会显示undefined
$ node -v
node没有安装,可以到node官网下载安装,已经安装的此部分可以略过,官网下载地址:
确认node.js安装完毕,下面我们会进行vue.js安装
vue.js安装步骤
//vue-cli是官方的快速构建这个单页应用的脚手架, -g是全局安装的意思,
//如果报权限错误,请在npm前面加上sudo以管理员权限安装
$ npm install -g vue-cli
# 创建一个基于 "webpack" 模板的新项目,建议用webpack模版
$ vue init webpack project-name
vue init webpack project-name后需要填写项目描述,如下
? Project name project-name
? Project description project-name
? Author max
? Vue build standalone //是否用标准方式,选yes
? Install vue-router? no //是否安装路由,刚开始可以选no
? Use ESLint to lint your code? yes //是否用ESLint规范代码,建议选yes,会让我们有个好的代码编写习惯
? Setup unit tests with Karma + Mocha? no //是否需要用Karma + Mocha进行单元测试,这里我们不需要,选no
? Setup e2e tests with Nightwatch? no//是否需要用Nightwatch进行e2e测试,这里我们也选no
vue-cli · Generated "douban".
To get started: //开始方法
cd douban //进入目录
npm install //安装项目依赖
npm run dev //运行项目
项目运行成功后,网页如下,
下一篇会写基于移动端开发项目实践.