手把手教你使用vue-cli脚手架(图文解析)


Posted in Javascript onNovember 08, 2017

写在前面:

使用 vue-cli 可以快速创建 vue 项目,vue-cli很好用,但是在最初搭建环境安装vue-cli及相关内容的时候,对一些人来说是很头疼的一件事情,本人在搭建vue-cli的项目环境的时候也是踩了相当多的坑,特此写了一篇搭建环境的教程,每一步尽量详细解析。需要的朋友可以过来参考下。

vue-cli脚手架的优势:

  1. 有一套成熟的vue项目架构设计,能够快速初始化一个Vue项目.
  2. vue-cli是官方支持的一个脚手架,会随本版本进行迭代更新。
  3. vue-cli提供了一套本地的node测试服务器,使用vue-cli自己提供的命令,就可以启动服务器。
  4. 集成打包上线方案。
  5. 还有一些优点,包括:模块化,转译,预处理,热加载,静态检测和自动化测试等,等大家深入使用下去就会发现vue-cli的强大之处。

本教程是基于windows系统。

下面正式开始搭建vue-cli脚手架。

命令行工具

命令行工具是我们操作npm的基础,这个必须要有的,很多教程没有写清楚,那些教程一上来就贴上一大堆命令,当初也不知道在哪里使用命令行工具。。。

git bash命令行工具

1、windows下本人推荐使用GitHub的桌面管理工具自带的git bash命令行工具,正常下载安装就可以。

2、下载地址,下图是下载安装完成之后,git bash的使用方法。

手把手教你使用vue-cli脚手架(图文解析)

git bash命令行工具的使用方法

ps:当然如果想使用自带的终端cmd命令行工具也是可以,但是毕竟没有git bash来的好用方便。

安装node.js

  1. 在node.js中文官网正常下载安装node.js就可以,没有什么特别需要注意的点(傻瓜式安装)。
  2. 在官网下载安装node.js后,就已经自带npm(包管理工具),不需要另外再进行安装npm了。
  3. 注意下载node.js版本要在4.0以上,避免版本过低影响使用。
  4. 打开命令行工具(随便哪个文件夹),输入命令行 node -v,npm -v,如下图,如果出现相应的版本号,则说明安装成功。

手把手教你使用vue-cli脚手架(图文解析)

检测node npm安装情

安装淘宝镜像

cnpm(淘宝镜像)相关:

  1. 这是一个完整 npmjs.org 镜像,是用来同步npm上面的模块。
  2. cnpm的同步频率为 10分钟 (新发布的模块有滞后性,同步是需要时间的,等不及的可以使用npm)。
  3. 安装cnpm的原因:npm的服务器是外国的,所以有时候我们安装“模块”会很很慢很慢超级慢。
  4. cnpm的作用:淘宝镜像将npm上面的模块同步到国内服务器,提高我们安装模块的时间。
  5. 安装完淘宝镜像之后,cnpm和npm命令行皆可使用,二者并不冲突

手把手教你使用vue-cli脚手架(图文解析)

截图出自淘宝镜像官网

安装方法:打开命令行工具,输入命令行:

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm使用方法:

$ cnpm install [name]

安装模块的时候,将npm换成cnpm就行,国内很多coder都是使用cnpm的,个人建议大家都装一下,附上:淘宝镜像网址、

安装webpack

安装方法:打开命令行工具,输入命令行:

npm install webpack -g

安装成功后输入webpack -v,如果出现相应的版本号,则说明安装成功。

安装vue-cli脚手架构建工具

安装方法:全局安装,随便一个文件夹,输入命令行:

npm install vue-cli -g

安装完成之后,输入命令行vue -V查看版本号,出现相应得到版本号即为成功:

手把手教你使用vue-cli脚手架(图文解析)

查看vue-cli是否安装成功

注:这里是大写的V

通过vue-cli,初始化vue项目

通过以上几步,将我们安装脚手架所需要的环境和工具都准备好好了,下面就可以使用vue-cli来初始化项目。

1。新建一个vuetext(项目名)文件夹来放置项目,在新建文件夹的上一级文件夹右键打开命令行工具,输入命令行:

vue init webpack vuetext1(项目名)

注:项目名不能大写,不能使用中文解释一下这个命令,这个命令的意思是初始化一个vue项目,其中webpack是构建工具,也就是整个项目是基于webpack的。其中vuetext1是整个项目文件夹的名称,这个文件夹会自动生成在你指定的目录中。

2。以下是脚手架安装过程(安装步骤解析在图片下面)

手把手教你使用vue-cli脚手架(图文解析)

vue-cli初始化项目选项配置详细解析

$ vue init webpack vuetext1--------------------- 安装vue-cli,初始化vue项目的命令
? Target directory exists. Continue? (Y/n) y---------------------找到了vuetext1这个目录是否要继续
? Target directory exists. Continue? Yes
? Project name (vuetext1)---------------------项目的名称(默认是文件夹的名称),ps:项目的名称不能有大写,不能有中文,否则会报错
? Project name vuetext1
? Project description (A Vue.js project)---------------------项目描述,可以自己写
? Project description A Vue.js project
? Author (OBKoro1)---------------------项目创建者
? Author OBKoro1 
? Vue build (Use arrow keys)--------------------选择打包方式,有两种方式(runtime和standalone),使用默认即可
? Vue build standalone
? Install vue-router? (Y/n) y--------------------是否安装路由,一般都要安装
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n---------------------是否启用eslint检测规则,这里个人建议选no,因为经常会各种代码报错,新手还是不安装好
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)--------------------是否安装单元测试
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n) y)--------------------是否安装e2e测试 
? Setup e2e tests with Nightwatch? Yes

vue-cli · Generated "vuetext1".
To get started:)--------------------如何开始
 cd vuetext1)--------------------进入你安装的项目
 npm install)--------------------安装项目依赖
 npm run dev)--------------------运行项目
Documentation can be found at https://vuejs-templates.github.io/webpack)--------------------vue-cli官方文档

现在vuetext1项目已经初步初始化完成了,里面也有一些文件,但是现在还不能成功运行。

3.如何运行项目

进入你刚才创建在vuetext1项目的文件夹里面,在vuetext1项目的文件夹里面右键运行git bash 命令行工具。

安装项目依赖。命令行: npm  install。前面在项目初始化的时候,已经存在了package.json文件,直接使用npm install 安装项目所需要的依赖,否则项目不能正确运行。

创建完成的“vuetext1”目录如下:

手把手教你使用vue-cli脚手架(图文解析)

创建完成的项目结构

到这里,我们已经成功使用vue-cli初始化了一个vue项目。

启动项目:

在vuetext1目录运行命令行npm run dev,启动服务,服务启动成功后浏览器会默认打开一个“欢迎页面”,如下图。

手把手教你使用vue-cli脚手架(图文解析)

vue-cli项目成功启动

注意:这里是默认服务启动的是本地的8080端口,所以请确保你的8080端口不被别的程序所占用,当有其他vue项目运行的时候,可以使用ctrl+c来中断运行。

结语:

本文关于如何搭建vue-cli脚手架已经尽量详细了,仔细阅读,按步骤来基本上可以成功。如果有哪个地方写的不够清楚的,欢迎指正。本文面向小白,写着玩,大手请轻喷。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
更优雅的事件触发兼容
Oct 24 Javascript
jquery如何改变html标签的样式(两种实现方法)
Jan 16 Javascript
Seajs的学习笔记
Mar 04 Javascript
indexOf 和 lastIndexOf 使用示例介绍
Sep 02 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
Dec 08 Javascript
JS获取和修改元素样式的实例代码
Aug 06 Javascript
Node.js中process模块常用的属性和方法
Dec 13 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
Vue引入jquery实现平滑滚动到指定位置
May 09 jQuery
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 Javascript
详解template标签用法(含vue中的用法总结)
Jan 12 Vue.js
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
vue中实现滚动加载更多的示例
Nov 08 #Javascript
详解使用webpack打包编写一个vue-toast插件
Nov 08 #Javascript
结合mint-ui移动端下拉加载实践方法总结
Nov 08 #Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 #Javascript
thinkjs 文件上传功能实例代码
Nov 08 #Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 #jQuery
在React 组件中使用Echarts的示例代码
Nov 08 #Javascript
You might like
一些关于PHP的知识
2006/11/17 PHP
php中使用接口实现工厂设计模式的代码
2012/06/17 PHP
利用PHP生成静态HTML文档的原理
2012/10/29 PHP
php实现编辑和保存文件的方法
2015/07/20 PHP
PHP处理二进制数据的实现方法
2016/06/13 PHP
TP5框架实现自定义分页样式的方法示例
2020/04/05 PHP
ThinkPHP5.1的权限控制怎么写?分享一个AUTH权限控制
2021/03/09 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
基于Jquery实现的一个图片滚动切换
2012/06/21 Javascript
jsvascript图像处理—(计算机视觉应用)图像金字塔
2013/01/15 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
JavaScript获取table中某一列的值的方法
2014/05/06 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
node中使用es5/6以及支持性与性能对比
2017/08/11 Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
2017/12/28 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
使vue实现jQuery调用的两种方法
2019/05/12 jQuery
vue 使用axios 数据请求第三方插件的使用教程详解
2019/07/05 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
[49:07]VGJ.T vs Optic Supermajor小组赛D组 BO3 第二场 6.3
2018/06/04 DOTA
小结Python用fork来创建子进程注意事项
2014/07/03 Python
python异步存储数据详解
2019/03/19 Python
Python实现去除图片中指定颜色的像素功能示例
2019/04/13 Python
Flask框架钩子函数功能与用法分析
2019/08/02 Python
Python创建数字列表的示例
2019/11/28 Python
numpy中生成随机数的几种常用函数(小结)
2020/08/18 Python
Kaufmann Mercantile官网:家居装饰、配件、户外及更多
2018/09/28 全球购物
小学三八妇女节活动方案
2014/03/16 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
拓展训练激励口号
2014/06/17 职场文书
终止劳动合同证明书样本
2014/11/19 职场文书
学习心得体会
2019/06/20 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL
Nginx内网单机反向代理的实现
2021/11/07 Servers
Python+DeOldify实现老照片上色功能
2022/06/21 Python