一、简介
vue作为前端开发的热门工具,受到前端开发人员的喜爱。为了简化项目的构建,采用vue cli来简化开发。
vue cli是一个全局安装的npm包,提供了终端使用的命令。vue create可以创建项目的脚手架;vue ui提供图形化的管理页面。
二、安装
1.安装node.js
node -v
查看node版本
npm -v
查看npm版本
2.安装vue cli
npm install -g @vue/cli
安装vue cli
vue --version
查看版本
三、使用
创建项目
vue create projectname
管理项目
vue ui
四、命令调用
在一个 Vue CLI 项目中,@vue/cli-service 安装了一个名为 vue-cli-service 的命令。你可以在 npm scripts 中以 vue-cli-service、或者从终端中以 ./node_modules/.bin/vue-cli-service 访问这个命令。
在项目默认的package.json中,会看到如下字样:
{ "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build" } }
通过npm run serve可建立Web测试环境,实时查看界面效果。
通过npm run build可生成html文件,用于发布到服务器上。
vue cli的安装与使用的更多相关文章
-
Vue CLI 介绍安装
https://cli.vuejs.org/zh/guide/ 介绍 警告 这份文档是对应 @vue/cli 3.x 版本的.老版本的 vue-cli 文档请移步这里. Vue CLI 是一个基于 V ...
-
Vue Cli安装以及使用
因为公司项目要用vue框架,所以会用vue-cli来新建项目.用过vue的都知道,要全局安装vue以及脚手架vue-cli,然后执行vue init webpack projectname来新建v ...
-
【Vue CLI】从安装到构建项目再到目录结构的说明
目录 1. 构建我们的项目 2. 目录结构说明 2.1 build目录 2.2 config目录 2.3 src目录 2.4 static目录 "Vue CLI是一个基于Vue.js进行快速 ...
-
[转]Vue CLI 3搭建vue+vuex 最全分析
原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...
-
vue cli创建typescript项目
使用最新的Vue CLI @vue/cli创建typescript项目,使用vue -V查看当前的vue cli版本 安装命令 npm install -g @vue-cli 创建项目 vue cre ...
-
使用vue/cli 创建一个简单的项目
首先,电脑安装了node.js官方要求8.9 或更高版本 (推荐 8.11.0+) npm install -g @vue/cli # OR yarn global add @vue/cli 全局安装 ...
-
Vue CLI 3搭建vue+vuex 最全分析
一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...
-
13. Vue CLI脚手架
一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...
-
基于vue cli 3.0创建前端项目并安装cube-ui
前提条件: 安装node.js. 国内的开发者最好先配置淘宝镜像. 之后用cnpm来代替npm命令. 项目创建过程: 打开cmd,输入命令进入目标工作空间,以本机项目为例: cd /d d: cd D ...
随机推荐
-
.NET WebAPI 实现图片上传(包括附带参数上传图片)
博主的项目,客户端是APP,考虑到以后也可能会应用到微信端.网站等,图片上传方法就需要兼容多端,并且以目前的设计,不允许非登录用户上传图片,就得在上传时解决附带参数上传图片的问题. 先来看看后台方法( ...
-
iOS TabeView 头视图和尾视图不滑动的实现
因项目有需求不能让section中的头尾视图滑动,顾根据网上的一些资料和自己整理的思路,已实现了不滑动效果,上代码,啥都说了,搞了2个小时都是泪.... 1.创建一个tableview _mainTa ...
-
一个PHP书单 -摘自网络
# PHP <PHP程序设计>(第2版) –PHP语法和入门最好的书 <PHP5权威编程> –PHP入门后升级书 <深入PHP:面向对象.模式与实践>(第3版) – ...
-
Fail2ban用来作DDOS防守工具,不知够不够份量
http://www.serversyntax.com/2012/12/how-to-secure-centos-server-ssh-fail2ban-ddos-deflate.html http: ...
-
mysql 命令
1.查看数据库: mysql> show databases; 2.使用数据库 mysql> use mysqldata; 3.查看数据表 mysql> show tables; 4 ...
-
Android而一个超级漂亮的日历控件
※效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGluZ2xvbmd4aW4yNA==/font/5a6L5L2T/fontsize/400/fil ...
-
[Node.js] 08 - Web Server and REST API
有了 [Node.js] 07 - Html and Http 作为基础,再继续下面的内容. Node.js 路由 Node.js GET/POST请求 Node.js Web 模块 Node.js ...
-
ElasticeSearch(五)分布式索引架构
关于分布式架构 首先将ES默认每个索引是5个分片,这样做得目的是两个一个索引的时候速度更快(将数据写到小分片的尾部比写入大分片尾部更加快):另外一个是当数据量达到一定程度之后,分片查询,在汇总(sca ...
-
hadoop3.1.0 HDFS快速搭建伪分布式环境
1.环境准备 CenntOS7环境 JDK1.8-并配置好环境变量 下载Hadoop3.1.0二进制包到用户目录下 2.安装Hadoop 1.解压移动 #1.解压tar.gz tar -zxvf ha ...
-
Get Sauce(状压DP)
描述 In order to celebrate the 8th anniversary of ZOJ, LCLL goes to a sauce factory to "Get Sauce ...