vue cli 全面解析


Posted in Javascript onFebruary 28, 2018

写在前面:

vue是什么,是一套构建用户界面的渐进式框架(官网解释),什么叫渐进式框架呢,简单回答就是主张最少,这些概念只能自己去看,自己去理解,一千个读者一千个哈姆雷特,不过多的解释。Vue官方文档 很全面的。

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

vue-cli脚手架的优势:

  • 有一套成熟的vue项目架构设计,能够快速初始化一个Vue项目.
  • vue-cli是官方支持的一个脚手架,会随本版本进行迭代更新。
  • vue-cli提供了一套本地的node测试服务器,使用vue-cli自己提供的命令,就可以启动服务器。
  • 集成打包上线方案。

5. 还有一些优点,包括:模块化,转译,预处理,热加载,静态检测和自动化测试等,等大家深入使用下去就会发现vue-cli的强大之处。

本教程是基于windows系统。

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

命令行工具

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

git bash命令行工具

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

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

vue cli 全面解析

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 全面解析

安装淘宝镜像

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 全面解析

注:这里是大写的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.如何运行项目

  1. 进入你刚才创建在vuetext1项目的文件夹里面,在vuetext1项目的文件夹里面右键运行git bash 命令行工具。
  2. 安装项目依赖。命令行: 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来中断运行。

Javascript 相关文章推荐
网页中的图片的处理方法与代码
Nov 26 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
IE浏览器不支持getElementsByClassName的解决方法
Aug 27 Javascript
jquery实现用户打分评分特效
May 28 Javascript
javascript编程异常处理实例小结
Nov 30 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
详解win7 cmd执行vue不是内部命令的解决方法
Jul 27 Javascript
JavaScript中一些特殊的字符运算
Aug 17 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
详解vue组件开发脚手架
Jun 15 Javascript
jQuery实现广告显示和隐藏动画
Jul 04 jQuery
js实现动态改变radio状态的方法
Feb 28 #Javascript
快速了解vue-cli 3.0 新特性
Feb 28 #Javascript
jquery radio 动态控制选中失效问题的解决方法
Feb 28 #jQuery
vue.js根据代码运行环境选择baseurl的方法
Feb 28 #Javascript
vue+element实现批量删除功能的示例
Feb 28 #Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 #Javascript
React 组件转 Vue 组件的命令写法
Feb 28 #Javascript
You might like
一个程序下载的管理程序(一)
2006/10/09 PHP
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
javascript基本语法
2016/05/31 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
浅谈JavaScript 数据属性和访问器属性
2016/09/01 Javascript
微信小程序 数组中的push与concat的区别
2017/01/05 Javascript
JS实现批量上传文件并显示进度功能
2017/06/27 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
基于vue-router 多级路由redirect 重定向的问题
2018/09/03 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python实现的简单抽奖系统实例
2015/05/22 Python
Python中属性和描述符的正确使用
2016/08/23 Python
python利用有道翻译实现"语言翻译器"的功能实例
2017/11/14 Python
Python 12306抢火车票脚本 Python京东抢手机脚本
2018/02/06 Python
Python3.6笔记之将程序运行结果输出到文件的方法
2018/04/22 Python
python中从str中提取元素到list以及将list转换为str的方法
2018/06/26 Python
Windows下安装Scrapy
2018/10/17 Python
Python编程中flask的简介与简单使用
2018/12/28 Python
python实现将多个文件分配到多个文件夹的方法
2019/01/07 Python
完美解决python3.7 pip升级 拒绝访问问题
2019/07/12 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
浅析HTML5中的download属性使用
2019/03/13 HTML / CSS
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
SQL面试题
2013/12/09 面试题
小学评语大全
2014/04/22 职场文书
晚会开幕词
2015/01/28 职场文书
商务英语求职信范文
2015/03/19 职场文书
导游词之无锡梅园
2019/11/28 职场文书
go语言中fallthrough的用法说明
2021/05/06 Golang
vscode中使用npm安装babel的方法
2021/08/02 Javascript