vue.js中如何用vue-cli搭建项目

不吃素的唐三藏 发布于 2019/01/26 17:40
查看:121|回复:5

今天我们来介绍一下,如何用vue-cli搭建项目模板

第一、 安装 node.js

首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包。

安装完成后,可以令行工具中输入 node -v 和 npm -v,如果能显示出版本号,就说明安装成功。

9e1b688568e6cc716745cef438354d83002.png

第二、安装 vue-cli

安装好了 node,我们可以直接全局安装 vue-cli:

npm install -g vue-cli

但是这种安装方式比较慢,推荐使用国内镜像来安装,所以我们先设置 cnpm: 

npm install -g cnpm --registry=https://registry.npm.taobao.org

如果安装失败,可以使用 npm cache clean 清理缓存,然后再重新安装。后面的安装过程中,如有安装失败的情况,也需要先清理缓存 

然后使用 cnpm 安装 vue-cli 和 webpack

cnpm install -g vue-cli

最新的 vue 项目模板中,都带有 webpack 插件,所以这里可以不安装 webpack 

安装完成后,可以使用 vue -V (注意 V 大写)查看是否安装成功。

53cfe19175eec3e664c3d509b30f6b7b002.png

第三、生成项目

首先需要在命令行中进入到项目目录,然后输入:

vue init webpack Vue-Project

其中 webpack 是模板名称 

7d21fcfe01aabd4e5a53e6480443e9e1002.png

Vue-Project 是自定义的项目名称,命令执行之后,会在当前目录生成一个以该名称命名的项目文件夹

9448d69bc2c08fe097e83611978be5b5002.png

配置完成后,可以看到目录下多出了一个项目文件夹,里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目

 

第四.然后进入项目目录(cd Vue-Project),使用 cnpm 安装依赖

cnpm install

 

第五.然后启动项目

npm run dev

项目运行成功后,浏览器会自动打开localhost:8080(如果浏览器没有自动打开,可以手动输入)。运行成功后,会看到如下所

14086ed7423063042c24e94b6f0569db002.png

查看点赞情况
全部点赞
总计: --

共有5条评论

发布新贴
招版主啦

版主

  • 杨_宇 杨_宇
  • WEB前讲师-苏少强 WEB前讲师-苏少强
  • web讲师--何广森 web讲师--何广森
  • web前端讲师-闫华伟 web前端讲师-闫华伟
  • zacharyjoke zacharyjoke
  • Web讲师-李家靖 Web讲师-李家靖

注册有礼

完善以下信息,为你推荐课程

  • 学生
  • 白领
  • 高管
  • 自由职业
  • 其他
  • 工作需要
  • 自我提升
  • 兴趣爱好
  • 创业/转型
  • 其他
  • 小白
  • 了解
  • 熟悉
  • 精通
  • 其他
  • 高中/中专
  • 专科
  • 本科
  • 硕士
  • 其他
  • 影视枪战大片特效解析
  • PS视觉惊悚课堂
  • 45天7千平方大厦变形记
  • 原画学习痛点技法全解析
  • 影视动画奇幻课堂
  • AI高端商业设计全攻略
  • UG职场生存必备指南
  • 日赚千元之新媒体行业揭秘
出现异常