vue 脚手架的使用 vue-cli
本文记录vue-cli的使用。在安装vue-cli之前,我们先来检查一下本地node和npm的版本,node版本要大于8,npm版本要大于6,低于这个版本的最好升级下,我node升级的时候,用命令行没好使,报错了,就直接到官网下载了个最新版的,直接重新安装了,npm可以用命令行升级,命令为npm install npm -g,下面是我node和npm的版本截图:
然后,我们来安装vue-cli,命令为 npm install -g @vue/cli,安装完成后可以使用vue --version来查看自己安装的脚手架的版本。
下面我们来新建项目,首先,在终端进入项目目录,使用到的命令是cd:
新建项目方法一:vue create create
然后运行vue create hello-vue来创建一个名称为hello-vue的项目,按回车键,会提示用淘宝镜像安装更快,敲如y按回车:
然后会出来cli工具的选项,我们一条一条来看,第一条,选择要使用的开发组件,默认是default:
按上下键可以选择Manually select features,这里我们在安装时直接选择一些常用的组件,上下移动,空格选择,回车确定:
是否选择历史,选择yes:
选择css预处理工具(可以按需要选择,我选择的是sass):
选择代码规则矫正(Airbnb和standard都可以):
选择检查代码的时间,选择save:
下面这条选默认的就可以:
然后,询问是否保存工程创建的选项,这里选择不N:
然后,工程就开始创建了:
创建成功后,会有提示:
运行上面截图蓝色字的两条命令,就可以运行项目了,我们来试一下:
在浏览器输入已下地址就可以访问项目啦~
- Local: http://localhost:8080/
- Network: http://192.168.1.160:8080/
新建项目方法二:使用ui界面
先退出之前新建的项目目录,然后运行vue ui,进入ui界面:
而使用ui界面创建项目,我录了个小视频:
用ui界面创建项目,我录了个小视频,因为安装时间长,没有录到安装成功的界面,我把成功界面截个图:
大家可以自己动手,新建一个项目,熟悉一下这个ui界面,很友好的,运行项目,就在左侧菜单的任务栏,其他的插件依赖配置什么的,也都可以进去看看都是些什么东西~
vue 脚手架的使用 vue-cli的更多相关文章
- 使用vue脚手架快速创建vue项目(入门)
1.安装环境 为了方便,以下操作大多数中命令行中运行,window可以用cmd,powershell,gitbash等. 安装node.js 打开它的官网,或者中文网站,然后直接下载就可以了,然后跟安 ...
- 如何利用vue脚手架创建一个vue项目
1.安装node.js 2.打开命令行查看下npm和node是否都安装好 node -v npm -v 3.安装淘宝镜像cnpm $ npm install -g cnpm --registry=ht ...
- 前端MVC Vue2学习总结(二)——Vue的实例、生命周期与Vue脚手架(vue-cli)
一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({ // 选项 }) 虽然没有完全遵循 ...
- Vue脚手架(vue-cli)安装总结
单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序. 提供一 ...
- 使用vue脚手架(vue-cli)快速搭建项目
一.从最简单的环境搭建开始: 安装node.js,从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装).安装完成之后,打开命令行工具(win+r,然后输入cmd ...
- Vue脚手架(vue-cli)搭建和目录结构详解
一.环境搭建 1.安装node.npm.webpack,不多说 2.安装vue-cli脚手架构建工具,打开命令行工具输入:npm install vue-cli -g,安装完成之后输入 vue -V( ...
- vue-cli 2.0搭建vue脚手架步骤
1.安装node 检测版本node -v 2.安装webpack npm install webpack -g 检测版本 webpack -v 3.安装vue-cli npm install vue- ...
- Vue2.0史上最全入坑教程(上)—— 搭建Vue脚手架(vue-cli)
ps: 想了解更多vue相关知识请点击VUE学习目录汇总 Vue作为前端三大框架之一截至到目前在github上以收获44,873颗星,足以说明其以悄然成为主流.16年10月Vue发布了2.x版本,经过 ...
- VUE系列一:VUE入门:搭建脚手架CLI(新建自己的一个VUE项目)
一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分 ...
- [vue三部曲]第一部:vue脚手架的搭建和目录资源介绍,超详细!
第一步 node环境安装 1.1 如果本机没有安装node运行环境,请下载node 安装包进行安装1.2 如果本机已经安装node的运行换,请更新至最新的node 版本下载地址:https://nod ...
随机推荐
- SG函数 与 ICG问题
ICG ICG(Impartial Combinatorial Games)游戏是组合游戏(Combinatorial Games)的一类 满足如下性质: ①有两名玩家 ②两名玩家轮流操作,在一个有限 ...
- P2134 百日旅行 (斜率优化,DP)
题目链接 Solution 斜率优化\(DP\). 今天下午才打的第一道题 QwQ... \(90\) 分很简单,一个简单的递推. 令 \(f[i]\) 为最后一天旅游的花费, \(g[i]\) 为最 ...
- linux--bash: redis-server: 未找到命令
linux 安装redis过程中出现了异常,make不通过,异常如下: [root@localhost redis-2.8.3]# make cd src && make all ma ...
- TypeToken获取运行时泛型类型
最近正好使用到了Guava的TypeToken来获取泛型的类型信息 比如,泛型父类需要获取其子类定义的泛型类型时: public abstract class GenericClazz<V> ...
- 【CF1020A】New Building for SIS(签到)
题意: 有n栋楼,从一栋楼某个地方,到大另一栋楼的某个地方,每栋楼给了连接楼的天桥,每走一层或者穿个一栋楼花费一分钟,求出起点到大目的点最少花费的时间 n,h<=1e8,q<=1e4 思路 ...
- 长度rem的使用
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- 转 C++ 面向对象程序设计的基本特点
传送门 Miss it C++ 面向对象程序设计的基本特点 First: 抽象 面向对象方法中的抽象,是指对具体问题(对象)进行概括,抽出一类对象公共性质并加以描述的过程. 抽象的过程,也是对问题 ...
- CodeForces 380.C Sereja and Brackets
题意 一串括号序列,只由(和)组成,然后是m个提问,提问l和r区间内,最大的匹配匹配括号数. 思路 第一,贪心的思想,用最正常的方式去尽量匹配,详细点说就是,先找到所有的(),然后删除这些(),再找所 ...
- html --- rem
// rem (function(doc, win) { var docEle = doc.documentElement, evt = "onorientati ...
- 51nod 1092 回文字符串【LCS】
1092 回文字符串 基准时间限制:1 秒 空间限制:131072 KB 分值: 10 难度:2级算法题 收藏 关注 回文串是指aba.abba.cccbccc.aaaa这种左右对称的字符串.每个字符 ...