Vue学习笔记之vue-cli脚手架安装和webpack-simple模板项目生成

vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。

GitHub地址是:https://github.com/vuejs/vue-cli

一、安装Nodejs

首先需要安装Node环境。安装完成之后,可以在命令行工具中输入node -vnpm -v,如果能显示出版本号,就说明安装成功。

二、安装vue-cli

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

npm install -g vue-cli

使用这种方式可能会安装比较慢,推荐大家使用国内的淘宝镜像来安装。(之前安装过了就不过多赘述了)

cnpm install -g vue-cli

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

安装完成后,可以使用vue -V(大写的V)查看vue的版本。

如果接下来你不知道要干嘛,那么你可以在命令行中输入

vue -help

它会有以下提示:

懂点英语的意思应该能看到提示的信息,聪明的你此时接下来执行vue list看看有哪些可用的官网模板:

vue list

Vue.js官方提供了两种类型的模板项目:

  • 基于vue cli和browserify的项目模板
  • 基于vue cli和webpack的项目模板

vue cli是Vue.js官方提供的命令行创建Vue.js项目脚手架的工具。这两种类型的项目模板分别提供了简单模式和完全模式,简单模式仅包含基于vue.js开发必要的一些资源和包,使用该模式可以快速地投入到开发。完全模式则还包括ESLink、单元测试等功能。

我们在这里使用webpack的项目模板。没有为什么,因为webpack有点叼叼的。

我们今天玩一下webpac-simple 基于webpack的简单模板。

再重申一遍,一定要使用命令行工具切换到你当前的目录下,类似这样

然后执行:

vue init webpack-simple my-project

 init :初始化我们的项目。

webpack-simple:使用的哪个模板,这里我们先使用webpack-simple模板

my-project:表示我们项目的名字,这名字可以自己命名,但不要起成系统软件的一些名字,比如vue,node,npm等

 执行如下命令

vue init webpack-simple my-project

接下来根据提示操作:

切换到当前目前,一定切换进来

cd my-project

下载当前项目所依赖的包

npm install

启动当前的项目

npm run dev

接下来见证奇迹的时刻来了,我们第一个vue的项目。只要出现如下界面,证明项目启动成功了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏LanceToBigData

linux(十一)之初始化文件

前面写了很多linux的知识,其实很多都是命令的,所以要去多多的练习才能学的更好,加油为了好工作。 要么现在懒惰,未来讨饭。要么现在努力,未来惬意。 一、初始化...

23070
来自专栏玄魂工作室

CTF实战12 任意文件包含漏洞

该培训中提及的技术只适用于合法CTF比赛和有合法授权的渗透测试,请勿用于其他非法用途,如用作其他非法用途与本文作者无关

19930
来自专栏苦逼的码农

Linux大人养成计划1---基础命令总结

刷了一波视频,现在把Linux的一些常用基本命令总结了下。学会这些,Linux的基本操作就会了。

10430
来自专栏py+selenium

py+selenium一个可被调用的登录测试脚本【待优化】

大部分系统现在都有登录页面,本文主要尝试写一个登录的测试脚本,及另一个脚本调用它登录测试已登录的页面模块。

37620
来自专栏c#开发者

Asp.net AJAX性能优化测试

Asp.net AJAX性能优化测试 Asp.net AJAX提高性能的原则(对web同样也适用): 合并(Composite)-减少请求的次数 压缩(C...

36950
来自专栏C/C++基础

Linux命令(8)——rz命令与sz命令

rz命令(Receive ZMODEM),使用ZMODEM协议,将本地文件批量上传到远程Linux/Unix服务器,注意不能上传文件夹。

43110
来自专栏算法channel

Python|模块,包,标准模板

01 .py文件-模块 一个.py文件就称之为一个模块,Module,模块使用的最大好处是大大提高了代码的可维护性。 当然,还提高了代码的复用性。 使用模块...

36850
来自专栏小狼的世界

Rsync服务介绍与配置

rsync 是一个用于增量文件传输的开源工具,不得不说,rsync简直是不同服务器间传输文件、同步文件的利器。与FTP相比,它具有非常简单的安装和配置方法。而且...

20020
来自专栏bboysoul

linux下重命名脚本推荐

11820
来自专栏应兆康的专栏

每天一个Linux命令(2):cd命令

Linux cd 命令是最基本的命令语句,其他的命令语句要进行操作,都是建立在使用 cd 命令上的。所以,学习Linux 常用命令,首先就要学好 cd 命令的使...

462110

扫码关注云+社区

领取腾讯云代金券