Vue学习笔记进阶篇之vue-cli安装及介绍


Posted in Javascript onJuly 18, 2017

介绍

Vue-cli是Vue的脚手架工具

主要作用:目录结构、本地调试、代码部署、热加载、单元测试

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

安装

全局安装vue-cli

npm install -g vue-cli

当然了,要想使用npm工具,就必须安装Node.js,node.js的安装方法这里就不做介绍了。

安装完成后,在终端输入以下命令, 可以查看vue的版本:vue -V

Vue学习笔记进阶篇之vue-cli安装及介绍

输入以下命令,可以查看官方提供的模板:

vue list

Vue学习笔记进阶篇之vue-cli安装及介绍

我们可以看到,vue官方提供了6个模板,我们这边主要使用webpack模板。

那么,什么是webpack呢?请看以下介绍:

WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。

创建项目

创建项目的命令:

vue init <template-name> <project-name>

template-name 为模板名称,例如上面vue list命令查到的模板的模板名称都可以使用。

project-name 就是你自己创建的项目名称了,自己随便定义,但是不能为中文。

下面,我们就用上述命令来创建一个自己的项目,首先中终端通过cd命令,进入你所需要创建项目所在的目录,然后执行以下命令:

vue init webpack my-demo1

Vue学习笔记进阶篇之vue-cli安装及介绍

在创建的过程中,会有一些项目信息和配置要自己填写,比如项目名称,项目描述,项目介绍等,后面还有几个要自己选择y/n的,我这边暂时都选择了n,因为目前我们还用不到这些东。然后根据提示,依次键入以下命令:

cd my-demo1
npm install
npm run dev

这三个命令是干嘛用的呢?

cd my-demo1:这个命令当然就是进入我们的项目目录了。

npm install:这个命令是用来安装项目的依赖项的,我们可以看到我们创建的项目中有这个文件package.json,这个文件的作用就是用来配置项目的依赖项的,而这个命令就负责安装这个配置文件里已经配置的项目,执行完成后项目目录会多个node_modules文件夹。

npm run dev:这个命令是用来运行项目的,这是个热加载的运行方式,只有修改了项目会立即更新到浏览器的。

除了上面的3个命令,还有个比较重要的命令:

npm run build

这个会生成静态文件,在根目录的dist里,里面有个index.html,这是服务器访问的路径指定到这里就可以访问我们自己的项目了。

项目目录介绍

Vue学习笔记进阶篇之vue-cli安装及介绍

项目目录结构如上图

  1. build config 这两个目录是webpack以及node服务器的配置。
  2. node_modules 这个目录是npm install命令执行后按照的依赖项所在目录。
  3. src 是用来存放项目代码的,我们的编码也都是在这个目录里进行的。
  4. .babelrc babel配置文件,把我们ES2105的代码通过它编译成ES5的。
  5. .editorconfig编辑器配置。
  6. .eslintignore 忽略语法检查的目录文件配置。
  7. .eslintrc.jseslint的配置文件。
  8. .gitignore配置Git仓库的忽略。
  9. index.html项目入口模板文件。
  10. package.json node配置文件

运行项目

上面说到我们运行项目的命令是:

nmp run dev

下面我们就执行一下,看下结果:

Vue学习笔记进阶篇之vue-cli安装及介绍

Vue学习笔记进阶篇之vue-cli安装及介绍

这个端口号我们也是可以修改的,它是在config/index.js文件下配置的。

Vue学习笔记进阶篇之vue-cli安装及介绍

只有修改这个地方,然后重新运行就好了。

另外,我们再看看这个npm run devnpm run build中的dev和build是个什么东西。

其实这个就是在package.json中配置的一个脚本:

Vue学习笔记进阶篇之vue-cli安装及介绍

如果大家熟悉nodejs的话,肯定一看就明白了,不过这些就算不明白,也不影响我们的vue的学习。

单文件组件

Vue学习笔记进阶篇之vue-cli安装及介绍

src/component目录是用来存放我们自己的组件的,可以看见,这里的组件是以.vue为后缀的单文件组件,一个文件就是一个组件。我把Hello.vue文件简化后,得到以下代码:

<template>
 <div class="hello">
  <h1>{{ msg }}</h1>
 </div>
</template>

<script>
export default {
 name: 'hello',
 data () {
  return {
   msg: 'Welcome to Your Vue.js App'
  }
 }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
 font-weight: normal;
}
</style>

这里面包含了,模板-即<template>标签的内容,js-即<script>标签的内容,和样式-即<style>标签的内容,在<style>里有个scoped属性,这个的意思就是这个样式仅在当前组件内有效果,如果没有这个属性,则这个样式就是全局的,会影响到其他组件的样式,所以这个一定要根据情况而定。

另外,如果想在我们的项目中引用其他的js, 或css 我们可以在根目录的index.html文件中添加,这样全局都可以使用的。

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

Javascript 相关文章推荐
封装好的省市地区联动控件附下载
Aug 13 Javascript
用函数式编程技术编写优美的 JavaScript_ibm
May 16 Javascript
js 判断控件获得焦点的示例代码
Mar 04 Javascript
js使用循环清空某个div中的input标签值
Sep 29 Javascript
bootstrap table小案例
Oct 21 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
js中的触发事件对象event.srcElement与event.target详解
Mar 15 Javascript
微信小程序后台解密用户数据实例详解
Jun 28 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
Aug 24 Javascript
Javacript中自定义的map.js  的方法
Nov 26 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
深入解析Vue 组件命名那些事
Jul 18 #Javascript
js实现本地图片文件拖拽效果
Jul 18 #Javascript
详解使用angularjs的ng-options时如何设置默认值(初始值)
Jul 18 #Javascript
js实现移动端导航点击自动滑动效果
Jul 18 #Javascript
JS实现点击Radio动态更新table数据
Jul 18 #Javascript
Angularjs的启动过程分析
Jul 18 #Javascript
关于javascript sort()排序你可能忽略的一点理解
Jul 18 #Javascript
You might like
如何在PHP中使用Oracle数据库(6)
2006/10/09 PHP
PHP Zip解压 文件在线解压缩的函数代码
2010/05/26 PHP
PHP获取文件后缀名的三个函数
2012/10/15 PHP
php引用返回与取消引用的详解
2013/06/08 PHP
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
PHP操作MySQL的mysql_fetch_* 函数的常见用法教程
2015/12/25 PHP
ThinkPHP实现附件上传功能
2017/04/27 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
Javascript 获取字符串字节数的多种方法
2009/06/02 Javascript
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
Jquery插件编写简明教程
2014/03/25 Javascript
node.js入门教程
2014/06/01 Javascript
Node.js中对通用模块的封装方法
2014/06/06 Javascript
jQuery判断多个input file 都不能为空的例子
2015/06/23 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
2016/05/30 Javascript
Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果
2016/07/07 Javascript
javascript回到顶部特效
2016/07/30 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
2017/09/30 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
[07:31]DOTA2卡尔工作室 英雄介绍主宰篇
2013/06/25 DOTA
[01:14:30]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第二场 8.20.mp4
2019/08/22 DOTA
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
Python函数返回值实例分析
2015/06/08 Python
python的exec、eval使用分析
2017/12/11 Python
python实现网页自动签到功能
2019/01/21 Python
python获取全国城市pm2.5、臭氧等空气质量过程解析
2019/10/12 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
物业经理自我鉴定
2014/03/03 职场文书
2015年综治维稳工作总结
2015/04/07 职场文书
2016年第十九届推普周活动总结
2016/04/06 职场文书
Python requests用法和django后台处理详解
2022/03/19 Python
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android