Vue命令行工具vue-cli详解

本文将详细介绍Vue命令行工具vue-cli。

概述

Vue-cli是Vue官方提供的用于初始化Vue项目的脚手架工具。使用Vue-cli有以下几大优势

1、Vue-cli是一套成熟的vue项目架构设计,会跟着Vue版本的更迭而更新

2、Vue-cli提供了一套本地的热加载的测试服务器

3、Vue-cli集成了一套打包上线的方案,可使用webpack或Browserify等构建工具

安装

下面来安装vue-cli

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

[注意]一定要在全局模式下安装vue-cli,否则无法使用vue命令

1.jpg

全局模式下,安装vue-cli后,才可以正常使用

2.jpg

输入vue命令,会出现如下视图

3.jpg

输入vue -V命令,可以看出当前vue-cli使用的是2.8.2版本。输入vue list 可以得到推荐的官方模板

4.jpg

创建项目

接下来,创建一个基于 webpack 模板的新项目

$ vue init webpack my-project

5.jpg

注意: 使用下箭头键进行切换时,向右的尖括号并不会随着按键的按下而变化,但是按下回车键时,选项确实更改了。

创建项目后,在当前目录下,会新建my-project文件夹,里面是my-project项目所包含的文件。

6.JPG

my-project中的package.json文件中,所依赖的包如下所示

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "A Vue.js project",
  "author": "match <121631835@qq.com>",
  "private": true,
  "scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js"
  },
  "dependencies": {
    "vue": "^2.4.2",
    "vue-router": "^2.7.0"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.2",
    "babel-core": "^6.22.1",
    "babel-loader": "^7.1.1",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.3.2",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "chalk": "^2.0.1",
    "connect-history-api-fallback": "^1.3.0",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "cssnano": "^3.10.0",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.14.1",
    "extract-text-webpack-plugin": "^2.0.0",
    "file-loader": "^0.11.1",
    "friendly-errors-webpack-plugin": "^1.1.3",
    "html-webpack-plugin": "^2.28.0",
    "http-proxy-middleware": "^0.17.3",
    "webpack-bundle-analyzer": "^2.2.1",
    "semver": "^5.3.0",
    "shelljs": "^0.7.6",
    "opn": "^5.1.0",
    "optimize-css-assets-webpack-plugin": "^2.0.0",
    "ora": "^1.2.0",
    "rimraf": "^2.6.0",
    "url-loader": "^0.5.8",
    "vue-loader": "^13.0.4",
    "vue-style-loader": "^3.0.1",
    "vue-template-compiler": "^2.4.2",
    "webpack": "^2.6.1",
    "webpack-dev-middleware": "^1.10.0",
    "webpack-hot-middleware": "^2.18.0",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

接下来, 进入my-project文件夹,并安装依赖包

$ cd my-project
$ npm install

7.jpg

运行项目

接下来,输入下列代码来运行项目

$ npm run dev

以上代码的意思是运行package.json中,scripts脚本中dev指代的程序。类比于,运行node build/dev-server.js

"scripts": {
    "dev": "node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js"
  }

8.jpg

localhost:8080的网页自动打开,效果如下

9.jpg

打开app.vue文件,在模板中加入<p>小火柴的蓝色理想</p> 这一行代码,并保存

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view></router-view>
    <p>小火柴的蓝色理想</p>
  </div>
</template>

当前浏览器将会自动更新到页面的最新状态,这是vue-cli自带的热更新的功能

10.jpg

项目部署

接下来,使用npm run build来部署上线的项目

npm run build

11.jpg

生成的dist目录,就是打包构建后的项目目录

12.jpg

Image placeholder
前端答疑
未设置
  10人点赞

没有讨论,发表一下自己的看法吧

推荐文章
能直接下载了!微软最爽命令行工具登陆Windows 10,GitHub标星已破4万6

乾明发自凹非寺 转自量子位 |公众号QbitAI微软正式放出命令行工具WindowsTerminal。这个在发布之际就引得开发者大呼“WoW!Awesome!MyGod!”,甚至引得不少人当场表态买P

爽到飞起!微软命令行工具发布!引诱开发者叛逃Mac,开源六小时冲上GitHub第二

晓查栗子乾明发自凹非寺转自量子位 |公众号QbitAIWoW!Awesome!MyGod!这是不少抱着Mac参加微软Build大会的开发者,看到命令行工具WindowsTerminal后的第一反应。随

使用Go语言在MacOS创建一个自定义的命令行工具

原文链接:https://idoubi.cc/posts/create-a-cli-tool-in-macos/ 使用MacOS做开发的朋友都知道,我们一般会使用Homebrew做软件包管理,经常会用

Jenkins CLI 命令行 v0.0.23

本文首发于:Jenkins中文社区作者:ZhaoXiaojieJenkinsCLI在参加2019年谁是最受欢迎的中国开源软件投票,如果您已经是JenkinsCLI的用户,请点击下面的链接帮忙投上一票。

万字详解Oracle架构、原理、进程,学会世间再无复杂架构

学习是一个循序渐进的过程,从面到点、从宏观到微观,逐步渗透,各个击破,对于Oracle, 怎么样从宏观上来理解呢?先来看一个图,这个图取自于教材,这个图对于从整体上理解ORACLE 的体系结构组件,非

Oracle数据库不同损坏级别的恢复详解

墨墨导读:在DBA的日常工作中不可避免存在着数据库的损坏,本文将主要介绍Oracle数据库遇到不同损坏级别下的应该采用的恢复方法,供读者在遇到此类情景时,能的找到适合自己的恢复方法,提高工作效率。数据

基于 Laravel 命令行开发 API 代码生成器

1.命令行文件生成 $phpartisanmake:commandApiGenerator 2.编写代码模板 就像你看到的,我使用了php的heredoc方式,不太优雅。开始用的文件方式,但是不支持

Git教程_1.4 起步 - 命令行

Git有多种使用方式。你可以使用原生的命令行模式,也可以使用GUI模式,这些GUI软件也能提供多种功能。在本书中,我们将使用命令行模式。这是因为首先,只有在命令行模式下你才能执行Git的所有命令,而大

kernel的结构与命令行参数

kernel包结构在RHEL中rpm包是一种cpio格式的压缩文件,它由源文件和元数据(metadata)组成。而在rpm包中kernelrpm比较特殊,是一个只有元数据的包,在元数据中约束了以下的包

vue路由使用图文详解

传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。本文将以示例的形式来介绍vue-router的各个特性,一共包含6个示例

vue中的diff算法详解

1.当数据发生变化时,vue是怎么更新节点的?要知道渲染真实DOM的开销是很大的,比如有时候我们修改了某个数据,如果直接渲染到真实dom上会引起整个dom树的重绘和重排,有没有可能我们只更新我们修改的

vue插槽详解

一、插槽内容一句话:插槽内可以是任意内容。先看一下下面的代码:声明一个child-component组件,如果现在我想在内放置一些内容,结果会是怎样? Vue.component('child

vue组件基础用法详解

概述在Vue里,一个组件本质上是一个拥有预定义选项的一个Vue实例组件是一个自定义元素或称为一个模块,包括所需的模板、逻辑和样式。在HTML模板中,组件以一个自定义标签的形式存在,起到占位符的功能。通

vue引入swiper vue使用swiper vue脚手架使用swiper /引入js文件/引入css文件

vue引入swipervue使用swipervue脚手架使用swiper/引入js文件/引入css文件欢迎加入前端交流群来获取视频资料以及前端学习资料:749539640转载文章请注明出处! 如果只是

工具分享:Linux tree 命令安装和使用

说明tree命令是一个比较实用文件系统查看工具,如下图,可以阶梯式地罗列某个目录下的所有子目录:如何安装?RHEL/CentOS下:#yuminstalltree-yDebian/Ubuntu, Mi

前端培训-中级阶段(31)- Class 的基本语法、Class 的继承(2019-12-26期)

前端最基础的就是HTML+CSS+Javascript。掌握了这三门技术就算入门,但也仅仅是入门,现在前端开发的定义已经远远不止这些。前端小课堂(HTML/CSS/JS),本着提升技术水平,打牢基础知

史上最全Oracle数据泵常用命令

导读:expdp和impdp是oracle数据库之间移动数据的工具,本文简单总结了数据泵的常用命令,希望对大家有帮助。前言expdp和impdp是oracle数据库之间移动数据的工具。expdp和

03.4. Go 的 http 包详解

前面小节介绍了Go怎么样实现了Web工作模式的一个流程,这一小节,我们将详细地解剖一下http包,看它到底是怎样实现整个过程的。 Go的http有两个核心功能:Conn、ServeMux Conn的g

详解 PHP 中的三大经典模式

单例模式 单例模式的含义:作为对象的创建模式,单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统全局地提供这个实例。它不会创建实例副本,而是会向单例类内部存储的实例返回一个引用。单例模式的三

详解 PHP 中的三大经典模式

单例模式 单例模式的含义:作为对象的创建模式,单例模式确保某一个类只有一个实例,而且自行实例化并向整个系统全局地提供这个实例。它不会创建实例副本,而是会向单例类内部存储的实例返回一个引用。单例模式的三

详解 PHP 反射的基本使用

PHP反射 今天我要给大家讲解的是PHP当中使用非常普遍的高级操作:反射。反射在当今几乎所有的PHP框架或者工具中都占用非常重要的角色,就比如Laravel的容器,容器对于Laravel架构来说极其重

Redis为什么是单线程、及高并发快的3大原因详解

Redis的高并发和快速原因 1.redis是基于内存的,内存的读写速度非常快; 2.redis是单线程的,省去了很多上下文切换线程的时间; 3.redis使用多路复用技术,可以处理并发的连接。非阻塞

Swoft2 配置详解

Swoft2配置详解更多资料请关注swoft系列教程、小白系列教程定期连载基本功能介绍 配置项是只读的,不能动态修改.所以不要尝试着动态修改配置 Swoft2的配置分为两类,环境配置和应用配置。 en

详解 varint 编码原理

什么是Varint编码Varint是一种使用一个或多个字节序列化整数的方法,会把整数编码为变长字节。对于32位整型数据经过Varint编码后需要1~5个字节,小的数字使用1个byte,大的数字使用5个

详解 | 阿里怎么做双11全链路压测?

导读:全链路压测是阿里的首创,本文将从工作内容、操作过程、运行总结等多个方向来介绍下阿里内部典型电商活动(如双11准备),以给大家展示一个完整的压测流程,帮助更多的企业和用户更好的完成性能测试。前言关