vue-cli构建项目

原创 2018年04月16日 17:17:06

vue-cli构建项目

通过阅读本文,能够使用vue-cli快速构建webpack模版项目。

准备工作


开始


全局安装vue 及 vue-cli

在命令行内运行npm i vue -g
安装完vue后,在命令行内运行npm i vue-cli -g

全局安装vue-cli


初始化项目

选择一个目录作为项目地址,并在此处按住shift+右键选择’在此处打开命令行’(本文使用的目录地址为G:)。

打开cmd命令行

我们需要使用vue init命令来初始化项目,具体格式如下:

$ vue init <template-name> <project-name>

< template-name >表示模板名称,vue-cli官方为我们提供了5种模板:

  • webpack-一个全面的webpack+vue-loader的模板,功能包括热加载,linting,检测和CSS扩展。
  • webpack-simple-一个简单webpack+vue-loader的模板,不包含其他功能,让你快速的搭建vue的开发环境。
  • browserify-一个全面的Browserify+vueify 的模板,功能包括热加载,linting,单元检测。
  • browserify-simple-一个简单Browserify+vueify的模板,不包含其他功能,让你快速的搭建vue的开发环境。
  • simple-一个最简单的单页应用模板。

< project-name >:标识项目名称,这个你可以根据自己的项目来起名字。
在实际开发过程中,我们一般使用webpack模版:

$ vue init webpack test

vue-cli构建配置
其中项目名称为test,ESLint代码验证、unit tests、e2e tests视项目情况决定是否开启。

运行项目

在项目目录(本文目录为G:/test)内打开命令行,运行npm run dev

G:\test> npm run dev

运行项目

打开浏览器,在地址栏输入localhost:8080,出现如下页面表示项目构建成功:

这里写图片描述

注意:如果8080端口被占用,执行npm run dev则会报出如下错误:

这里写图片描述

此处需要结束使用8080端口的进程,或者更换项目端口。


后话

本文具体只讲到了vue-cli构建项目的方法,具体内容按官网为主。
后续有空会补上node安装填坑、更换项目端口等内容。

补充

node安装填坑

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u012830533/article/details/79963423

UML参考手册 第二部分 基 本 概 念 第7章 活 动 视 图

UML参考手册  第二部分 基 本 概 念  第7章 活 动 视 图7.1 概述  活动图是一种特殊形式的状态机,用于对计算流程和工作流程建模。活动图中的状态表示计算过程中所处的各种状态,而不是普通对...
  • CandyCat
  • CandyCat
  • 2001-05-26 23:01:00
  • 1463

利用 vue-cli 构建一个 Vue 项目

一、项目初始构建现在如果要构建一个 Vue 的项目,最方便的方式,莫过于使用官方的 vue-cli 。首先,咱们先来全局安装 vue-cli ,打开命令行工具,输入以下命令:$ npm install...
  • JimmyLuo17
  • JimmyLuo17
  • 2017-08-13 23:05:23
  • 1021

vue-cli快速构建Vue项目

ue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的。 vue-cli怎么使用? 安装vue-cli之前,需要先装好vue 和 webpack npm...
  • huang100qi
  • huang100qi
  • 2017-03-22 16:07:13
  • 516

Vue.js:使用vue-cli快速构建项目

vue-cli是什么? vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的。 vue-cli怎么使用? 安装vue-cli之前,需要先安装了vue和webpack,不知道...
  • qq_32279193
  • qq_32279193
  • 2016-12-13 15:46:18
  • 1523

vue-cli的构建+Vue的超级简单实例

☞ vue-cli的构建 ☞ 构建一个简单的Vue导航栏菜单实例
  • qq_34320300
  • qq_34320300
  • 2017-11-15 23:04:56
  • 1281

Vue-cli脚手架构建多页面项目

这是一个用Vue-cli构建的多页面项目,我们大家都熟悉vue-cli是用来快速构建单页面应用程序的脚手架,但是在我们实际的项目开发过程中多数用到的还是多页面的应用程序,在这里我通过查资料整理了一份文...
  • m0_37558869
  • m0_37558869
  • 2017-05-29 17:42:59
  • 432

vue-cli 项目搭建

vue-cli 项目搭建 1、首先需要安装nodejs(略了)。 2、用node安装vue-cli。 npm install -g vue-cli 3、新建目录用来存放工程。 新建一...
  • wild46cat
  • wild46cat
  • 2017-07-30 07:51:49
  • 595

使用vue-cli构建vue工程,及一些小坑的记录

这篇文章主要记录如何构建一个vue工程,及踩到过的坑 使用vue+webpack+vue-router+vuex+axios+elementUI+jQuery+一些jQuery插件...
  • u011200062
  • u011200062
  • 2017-08-21 17:29:21
  • 267

如何使用vue-cli生成项目

如何自动生成vue2.0+webpack项目!
  • zg091418
  • zg091418
  • 2016-12-20 16:46:26
  • 3688

Vue学习之环境构建--------vue-cli构建vue项目

周围的朋友一直都在说vue的优点,之前一直在看angular,抱着好奇心学习了vue,想从最基础的地方记录我的vue。首先第一步离不开环境的搭建,那么就来记录我的vue环境搭建之路。 同作为前端的流...
  • diligentkong
  • diligentkong
  • 2017-07-12 19:46:55
  • 575
收藏助手
不良信息举报
您举报文章:vue-cli构建项目
举报原因:
原因补充:

(最多只允许输入30个字)