(一)Vue.js2.0开发之路 - 环境搭建

一 开发环境配置
  1. node.js 安装

http://nodejs.cn/ 下载安装包
安装成功后利用 npm -v node -v可查询当前版本号 ,保证node版本在4.0.0以上即可

(一)Vue.js2.0开发之路 - 环境搭建_第1张图片

  1. vue-cli 安装

在终端输入sudo npm install -g vue-cli命令进行安装
提示:sudo是在mac环境下使用的用于提升一下用户权限,windows环境下省略sodo命令安装即可。
输入密码:


正在安装:安装过成可能有点缓慢

安装完成:
(一)Vue.js2.0开发之路 - 环境搭建_第2张图片

执行 vue命令:会告知一些vue的用法
(一)Vue.js2.0开发之路 - 环境搭建_第3张图片

  1. vue-cli 使用
vue list

执行vue list 会有一些模版进行选择

(一)Vue.js2.0开发之路 - 环境搭建_第4张图片

vue init

执行vue init webpack takeout进行安装

(一)Vue.js2.0开发之路 - 环境搭建_第5张图片

提示:
模版名称 webpack (手机客户端项目选择webpack模版)
项目名称 takeout (根据项目取名)
(一)Vue.js2.0开发之路 - 环境搭建_第6张图片

安装过程会有一些初始化的设置
(一)Vue.js2.0开发之路 - 环境搭建_第7张图片

Project name takeout:默认项目名称 直接回车即可
Project description :填写项目描述 然后回车
Author :作者名字 直接回车
Install vue-router? :是否安装 vue-router选择yes 后续会介绍 vue-router的应用
Use ESLint to lint your code? :ESlint 是es6的代码风格检查器 为防止多人开放代码风格不一致 选择yes
Pick an ESLint preset :ESlint的一个模版 一般用默认的即可
Setup unit tests with Karma + Mocha? :前端测试的一个库 根据情况选择Y/N 基于界面的项目选择NO
Setup e2e tests with Nightwatch? 选择NO
这样一个项目的初始化就完成啦

安装完成之后会有提示命令告知怎么应用

cd takeout : 打开项目
npm install : 安装依赖
npm run dev : 运行项目
提示:mac系统下安装依赖需要执行sudo npm install
安装完以来使用npm run dev即可运行以创建好的项目了

你可能感兴趣的:((一)Vue.js2.0开发之路 - 环境搭建)