使用vue-cli构建Vue项目

1871 次阅读 zuley 发布于 1年前 (2016-09-07) 前端开发 2 COMMENTS

专门为Vue提供开箱即用的构建工具配置。拥有包括热重载、保存时静态检查以及可用于生产环节的构建配置的项目。

使用vue-cli构建Vue项目

vue-cli是一个官方出品的命令行工具,专门为Vue提供开箱即用的构建工具配置。拥有包括热重载、保存时静态检查以及可用于生产环节的构建配置的项目

第一步:安装node.js环境依赖

这部分不多说,网上大把的教程。直接上node.js的官方网站下载安装即可。新版本node.js默认自带npm。
node.js官方网站

第二步:安装Vue-cli官方命令行工具

能够正常使用npm之后即可进行vue-cli的安装。

# 全局安装 vue-cli
$ npm install -g vue-cli

安装vue-cli后找不到vue命令的问题【MAC环境】

因为英语不好,也看不懂报错的是啥。。。所以网上找了很久才在知乎上找个一个相关的问题,说是需要配置环境变量,过程一看就繁琐的很。。。

然后我猜测是不是由于权限的问题导致的,就取巧尝试的加上了sudo语句,成功解决问题。

# 全局安装 vue-cli
$ sudo npm install -g vue-cli

第三步:创建一个基于“webpack”模板的新项目

直接执行以下创建命令,然后填写项目相关信息,或者直接一路回车确认就行。

# 创建一个基于 "webpack" 模板的新项目
$ vue init webpack my-project

第四步:安装依赖

直接进入项目根目录,然后安装npm依赖

# 进入项目根目录
$ cd my-project
# 安装依赖
$ npm install

第五步:运行项目,Hello World!

成功安装依赖后即可启动项目,在命令行执行以下命令

$ npm run dev

启动成功,系统会创建一个本地测试环境,在浏览器中输入这个地址访问即可。

http://localhost:8080

如果端口被占用,这个地址可能是其他的地址。这时可以直接在命令行终端找到这个地址

第一讲:起步

  1. Vue2.0 系列教程:简介
  2. Vue2.0 系列教程:npm 常用命令
  3. Vue2.0 系列教程:npm package.json 配置文件语法
  4. Vue2.0 系列教程:Vue的安装和使用

第二讲: 构建环境和安装依赖

  1. Vue2.0 系列教程:初始化项目
  2. Vue2.0 系列教程:配置路由
  3. Vue2.0 系列教程:使用 leancloud 云服务

第三讲:开发页面

  1. Vue2.0 系列教程:注册页面
  2. Vue2.0 系列教程:登录页面
  3. Vue2.0 系列教程:首页 OR 退出登录
二维码
扫描此二维码去手机端访问

使用vue-cli构建Vue项目

文章评论

  1. 广告任务网 2016-9-8 08:05 #1

    认真拜读中……

发表评论