Vue — 第六天（vue-cli-介绍）

vue-cli-介绍

vue-cli是官方提供的开发vue项目的脚手架工具。

脚手架是为了保证各施工过程顺利进行而搭设的工作平台。

  • 在开发过程中，脚手架工具是有用的，开发完成（项目上线），它就没有用了。

在这里插入图片描述
vue-cli可以提供基于vue项目架子的快速创建，成为了一套标准。

  • 项目目录结构，统一的项目结构。
  • 提供了开发过程中的系列工具，
    • 例如：babel 语法降级的
    • 例如：eslint 约束语法风格（代码风格）
    • 例如：less 预处理器
    • …
  • 提供一个开发时服务器，预览代码（预览项目）
    • 提供：自动刷新浏览器，方便你预览
    • 提供：热更新功能，有些资源的修改，不需要刷新浏览器，立即更新，进行预览
    • …

总结：

  • vue-cli是一个提供开发项目过程中，便利的一个平台。更加方便的开发项目，提高你的开发效率。
  • 基于nodejs的命令行工具。

vue-cli-安装

以npm包的格式存在的（不是一个可执行文件），所以要以npm包的方式来安装。

安装：

任意找一个cmd窗口，通过全局安装 @vue/cli

# npm安装
npm i @vue/cli -g# 下面是一个可能的安装之后的显示结果
npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
C:\Users\fanyoufu\AppData\Roaming\npm\vue -> C:\Users\fanyoufu\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js> core-js@3.6.5 postinstall C:\Users\fanyoufu\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\core-js
> node -e "try{require('./postinstall')}catch(e){}"Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirockAlso, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.13 (node_modules\@vue\cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.13: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})+ @vue/cli@4.3.1
added 10 packages from 49 contributors, removed 12 packages and updated 100 packages in 115.609s

  • 成功：安装日志中没有任何关于 error err 相关的日志，代表成功。

  • 关于安装报错的问题：

    • 90%是网络问题，你多试试。
    • 如果安装慢，使用淘宝镜像。
    npm i @vue/cli -g --registry=https://registry.npm.taobao.org
# 或者是使用nrm

  ```bash# mac 苹果电脑sudo npm i @vue/cli -g

测试：

在任何一个目录下，运行命令行：

vue --version

如果能够输出版本号，就说明已经成功安装了脚手架工具了。

例如：

@vue/cli 4.3.1

vue-cli-创建项目

目标

  • 用 vue-cli工具来创建vue项目。
  • 掌握vue项目结构目录。

步骤

在某个目录下（你需要创建项目的地方）打开命令行窗口，有三种方法：

  • shift + 鼠标右键
  • 选择：win7 在此处打开命令行窗口 win8|10 在此处打开powershell窗口

或者：

  • 在文件夹地址栏，输入cmd

或者：

  • 在vscode打开终端（有时会出错）
  1. 打开命令行窗口，执行命令：
# 1. 必须英文  2. 不能和包名（不要与当前文件夹重名，不要取名为vue,express...包名）重名
vue create 项目名称
  1. 选择创建方式，默认创建，自定义创建。选择默认创建

在这里插入图片描述

  1. 等待安装项目依赖的包

在这里插入图片描述
4. 创建成功
在这里插入图片描述

  1. 启动项目（在项目根目录下执行 npm run serve）

    记得进入项目目录 cd vuecli-demo

npm run serve
  1. 启动成功

在这里插入图片描述

  1. 去浏览器访问 http://localhost:8080

在这里插入图片描述

说明

它会自动打开浏览器，并时时监听代码：如果代码有改动，它会自动刷新。

项目目录

vue create XXX 创建项目时，它会自动创建一套目录结构。

目录结构

项目目录结构：

  • 典型SPA。
  • 项目会自带git管理
  • node_modules + pakage.json 是一个 npm项目。

在这里插入图片描述

在开发时，我们需要把自己的代码写在src目录下。

前端工作目录：

在这里插入图片描述

入口文件main.js是所有工作的基础。

入口文件

解释main.js的代码：

// 项目的入口文件
// 'vue' 是在这个项目中通过npm安装的包
// 脚手架工具自动给你安装的包,在如下两个地方可以看到：
//   - package.json
//   - node_modules// 相当在.html文件中<script src="./vue.js">
import Vue from 'vue' // App.vue是一个单文件组件
// 导入一个组件
import App from './App.vue'
// alert('123456')
// console.log(Date.now())
// 约定当前对vue代码的提示方式
// production:生产环境
// productionTip = false 不采用生产环境下的提示。尽可能给更多的提示信息。
Vue.config.productionTip = false// Vue实例有一个函数$mount, 它可以把vue实例挂载到某个dom窗口容器中
// new Vue().$mount('#app')  <====> new Vue({el:'#app"})// render也是Vue实例的一个配置项
// render作用：指定视图的内容，它的值是一个函数。
//           在这里，它的内容就是上面引入的组件App// 整体的作用是：把App.vue这个组件的内容，渲染到 index.html中的
// <div id="app"></div> 中， 再显示出来。new Vue({render: h => h(App),// render: function(h) { return h(App) },
}).$mount('#app')// #app 是指public下index.html中的14行中的<div id="app">

内容：

  • 导入VUE模块
  • 导入根组件
  • 开启开发时提示
  • 创建根实例，然后在根实例上使用组件。
    • render函数是解析App.vue根组件
    • $mount函数将解析的APP.vue组件的内容替换index.html中的#app容器。

职责：

  • 负责依赖项目需要的资源
  • 根实例的创建

ES6模块化

什么是模块化

目标：让一个.js文件(A.js)中可以引用另一个.js文件(B.js)中的代码

模块: 就是一个文件。

模块化的规范：

  • commonjs 规范。nodejs中是commonjs规范。
  • es6规范。ECMAScript规范。

在nodejs中，模块化规范：CommonJS

  • 导出：module.exports = '导出的内容' exports.xxx = '导出的内容'
  • 导入：const path = require('path')

nodejs中的模块化与es6中的模块化是不同的。

ES6模块化

ES6也提供了模块化规范：ES6模块

  • 默认导入与导出
    • 导出：export default 导出内容
    • 导入：import 变量名 from 'js模块路径'
  • 按需导入与导出
    • 导出：
      • export const 成员变量名1 = '导出内容1'
      • export const 成员变量名2 = '导出内容2'
    • 导入：import {成员变量名1} from 'js模块路径'

基本步骤

定义模块

  • 创建一个.js文件，其中，写一些变量，函数…
// 创建一个模块// 如何把es6module/a.js中的fn这个函数给main.js中去使用？const a = 100
function fn(x,y) {return x + y
}

导出模块

// 创建一个模块// 如何把es6module/a.js中的fn这个函数给main.js中去使用？// const a = 100
function fn(x,y) {return x + y
}// 导出模块中的fn
export { fn }

导入模块

main.js

import { fn } from './es6module/a.js'
console.log(fn(100,200)) // 300

默认导入与导出

module-a.js

// 模块a  默认导出
// 可以导出任何格式的内容：字符串  数字  函数  对象  数组 ...
export default {name: '模块A',attr: '属性'
}

main.js

import obj from './module-a'
console.log(obj) // {name: "模块A", attr: "属性"}

按需导入与导出

module-b.js

// 模块B  按需导出
export function fn(x,y) {return x + y
}export function fn1(x,y,z) {return x + y +z
}
export const a = 314

另一种写法：

function fn(x,y) {return x + y
}function fn1(x,y,z) {return x + y +z
}
const a = 314export { fn, fn1,a}

main.js

// 按需导入
import {a,b} from './module-b'
console.log(a,b)

整体导入

// 按需导入（全部成员导入）
import * as all from './module-b'
console.log(all) // 收集了所有成员的变量（对象）

默认导出和按需导出共存

module-c.js

// 混合导入
//  同时有默认导出和 按需导出const fn = function(x,y) {return x + y
}const a = 100
const fn1 = function(x,y,z) {return x + y+z
}// 按需导出
export {a, fn1
}
// 默认导出
export default {fn
}

main.js

// 有混合导入
import obj, {fn1} from './es6module/c.js'console.log(obj,fn1)

导入导出重命名

注意：ES6的模块化，浏览器暂时不支持。

单文件组件

用一个.vue为后缀的文件来声明一个组件。

以前定义组件

// 全局注册组件
Vue.component('com-a',{// 组件配置对象template: '<div>组件结构</div>'
})new Vue({// 局部注册组件components: {'com-b': {// 组件配置对象template: '<div>组件结构</div>'}}
})

无论是何种注册方式，每个组件必须有一个组件配置化对象。

现在定义组件

在vue-cli中

  • 以 .vue 文件的方式来定义组件，文件的内容代表的是：组件配置对象，称为：单文件组件。
  • 共有三个部分
    • template（可选 ）： 约定这个组件的视图
    • script（必须）: 设置除了template之外的组件配置项，并默认导出
    • style（可选 ）: 用来组件中元素的样式
  • 需要渲染这个组件
    • 使用这个配置对象进行 全局注册 或者 局部注册，再来使用。
    • 使用路由规则中的 component 选项指定路由配置对象。

.vue文件的格式：

// 相对于组件配置对象中 template 选项，声明组件结构。
<template><div class="red">必须有一个root（根）标签 {{msg}}</div>
</template>
// 如果有其他的配置选项，需要默认导出一个对象，在对象中声明其他配置选项
<script>
export default {// 其他组件配置对象data () {return {msg: '单文件组件数据'}}
}  
</script>
// 当前组件需要样式
<style>.red{color: red;}
</style>

用这种方式定义组件，结构 逻辑 样式 分工明确，非常清晰，便于维护。

  • style中scoped属性作用：限制样式在当前组件下生效。

如何在码云上观察代码的变化

慢慢训练自己去码云查看代码的变化！

在这里插入图片描述

vscode-插件vetur

它能更好的编辑.vue文件

在这里插入图片描述

eslint

是独立于vue的代码检查工具。

作用： 对代码的编码格式进行检查，能帮助程序员减少代码出错的风险。例如：如果你定义了一个变量又没有在随后的代码中使用它，则eslint就会报错。

错误示例

在这里插入图片描述

这个错误是定义了变量，后面没有使用。

解决错误

  • 看懂 出错解释’a’ is assigned a value but never used 。直接改过来就行。

在这里插入图片描述

命令行

启动项目要运行如下命令：

npm run serve

这是由于vuecli在package.json中预置了三条scripts。

通过npm run XXXX 就可以运行scripts中指定义的命令。

在这里插入图片描述

babel

Babel 是一个 JavaScript 编译器。它能把es6 的语法 --------> es5的语法 以兼容低版本的浏览器。

在这里插入图片描述

vue-cli自动集成了babel,在项目的根目录下，babel.config.js文件，其中约定了如何去做es6到es5的降级处理。

module.exports = {presets: ['@vue/cli-plugin-babel/preset']
}

解决错误

  • 看懂 出错解释’a’ is assigned a value but never used 。直接改过来就行。
    - [外链图片转存中...(img-muJo4itg-1589793464304)]

命令行

启动项目要运行如下命令：

npm run serve

这是由于vuecli在package.json中预置了三条scripts。

通过npm run XXXX 就可以运行scripts中指定义的命令。

[外链图片转存中...(img-uBdUU7rD-1589793464305)]

babel

Babel 是一个 JavaScript 编译器。它能把es6 的语法 --------> es5的语法 以兼容低版本的浏览器。

[外链图片转存中...(img-5dRMwam1-1589793464306)]

vue-cli自动集成了babel,在项目的根目录下，babel.config.js文件，其中约定了如何去做es6到es5的降级处理。

module.exports = {presets: ['@vue/cli-plugin-babel/preset']
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/247962.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Vue — 第七天（vue-cli-案例）

Vue — 第七天（vue-cli-案例）

资料获取地址&#xff1a; github: https://gitee.com/wang_yu5201314/VUE_vuecli SSH&#xff1a; gitgitee.com:wang_yu5201314/VUE_vuecli.git hero案例-项目介绍 功能介绍&#xff1a; 三个模块 英雄列表(只做这个)装备列表技能列表 英雄列表 列表组件删除功能添加组件编…
阅读更多...
postman测试工具

postman测试工具

做文件上传测试的时候可以选择输入方式为文件 做文件下载测试的时候&#xff0c;可以选择 转载于:https://www.cnblogs.com/thesun/p/10853226.html
阅读更多...
webpack — 概述介绍

webpack — 概述介绍

webpack概述 webpack是一个流行的前端项目构建工具&#xff08;打包工具&#xff09;&#xff0c;可以解决当前web 开发中所面临的困境。 webpack提供了友好的模块化支持&#xff0c;以及代码压缩混淆、处理js兼容问题、性能优化等强大的功能&#xff0c;从而让程序员把工作的…
阅读更多...
彻底解决iOS项目中 _OBJC_CLASS_$_XXXService, referenced from: 的类似问题

彻底解决iOS项目中 _OBJC_CLASS_$_XXXService, referenced from: 的类似问题

这是大家熟悉的开发过程中可能遇到的问题 这是提交源码到appStore不支持64位设备的提示 本人在提交项目到appStore时发生的的错误&#xff0c;提示必须要支持64的设备&#xff0c;然后自己赶紧进行相关的适应&#xff0c;出现了类似标题的问题&#xff0c;解决方法如下: 1、…
阅读更多...
THUPCCTSAPIO2019：Far Away

THUPCCTSAPIO2019：Far Away

流水账~ THUPC nmdwsmduliu&#xff01; THUPC Day -INF~Day -2 大概就是自己做题和每周两次的考试&#xff0c;lsy和fcw两个外校的来吊打我们qwqqq THUPC Day -1 Z208 长沙->北京 在车上看gzy/tjj/xzz打摆&#xff1f; THUPC Day 0 从火车站出来做地铁的时候和tjj做反了可海…
阅读更多...
UIDocumentInteractionController之程序间文档共享

UIDocumentInteractionController之程序间文档共享

iOS中的沙盒可以让平台更加的安全&#xff0c;这也是沙盒给用户带来的最主要好处。不过由于沙盒的严格限制&#xff0c;导致程序之间共享数据比较麻烦。一般在程序间共享文档可以通过UIDocumentInteractionController类实现通讯。它支持在你的app中用其他app预览和显示文档。同…
阅读更多...
c#基础知识梳理（四）

c#基础知识梳理（四）

上期回顾 - https://www.cnblogs.com/liu-jinxin/p/10826971.html 一、类 当你定义一个类时&#xff0c;你定义了一个数据类型的蓝图。这实际上并没有定义任何的数据&#xff0c;但它定义了类的名称意味着什么&#xff0c;也就是说&#xff0c;类的对象由什么组成及在这个对象…
阅读更多...
UIButton设置圆角和边框及边框颜色

UIButton设置圆角和边框及边框颜色

UIButton *testButton [UIButton buttonWithType:UIButtonTypeSystem];[testButton setFrame:CGRectMake(self.view.frame.size.width/2, self.view.frame.size.height/2, 100,100)];[testButton setTitle:"获取屏幕尺寸" forState:UIControlStateNormal];[testButt…
阅读更多...
Objective-C 深复制和浅复制与NSCopying协议

Objective-C 深复制和浅复制与NSCopying协议

1.简单复制只能实现浅拷贝&#xff1a;指针赋值&#xff0c;使两个指针指向相同的一块内存空间&#xff0c;操作不安全。 2. Foundation类已经遵守了<NSCopying>和 <NSMutableCopying>协议,即实现了copy和mutableCopy方法,因此Foundation对象可以使用这些方法创建对…
阅读更多...
NSTimer 进阶使用总结与注意事项

NSTimer 进阶使用总结与注意事项

NSTimer 是 iOS 上的一种计时器&#xff0c;通过 NSTimer 对象&#xff0c;可以指定时间间隔&#xff0c;向一个对象发送消息。NSTimer 是比较常用的工具&#xff0c;比如用来定时更新界面&#xff0c;定时发送请求等等。但是在使用过程中&#xff0c;有很多需要注意的地方&…
阅读更多...
一步一步教你实现iOS音频频谱动画（一）

一步一步教你实现iOS音频频谱动画（一）

如果你想先看看最终效果再决定看不看文章 -> bilibili示例代码下载 第二篇&#xff1a;一步一步教你实现iOS音频频谱动画&#xff08;二&#xff09; 基于篇幅考虑&#xff0c;本次教程分为两篇文章&#xff0c;本篇文章主要讲述音频播放和频谱数据的获取&#xff0c;下篇将…
阅读更多...
微信小程序的基础 （一）

微信小程序的基础 （一）

微信小程序介绍- 链接 微信小程序&#xff0c;简称小程序&#xff0c;是一种不需要下载安装即可使用的应用&#xff0c;它实现了应用“触手可及”的梦想&#xff0c;用户扫一扫或搜一下即可打开应用 1. 为什么是微信小程序? 微信有海量用户&#xff0c;而且粘性很高&#x…
阅读更多...
IDEA提交项目到SVN

IDEA提交项目到SVN

一.提交步骤 VCS--Enable...-->点击项目右键-->subversion-->share directory-->commit 二.IDEA SVN 忽略文件的设置 1》share .使用idea在将项目提交到svn的过程中遇到这样的问题 将项目share之后再设置ignore files &#xff0c;在commit的时候&#xff0c;不会将…
阅读更多...
项目ITP(五) spring4.0 整合 Quartz 实现任务调度

项目ITP(五) spring4.0 整合 Quartz 实现任务调度

版权声明&#xff1a;本文为博主原创文章&#xff0c;未经博主同意不得转载。https://blog.csdn.net/u010378410/article/details/26016025 2014-05-16 22:51 by Jeff Li 前言 系列文章&#xff1a;[传送门] 项目需求&#xff1a; 二维码推送到一体机上&#xff0c;给学生签到扫…
阅读更多...
喜欢用Block的值得注意-Block的Retain Cycle的解决方法

喜欢用Block的值得注意-Block的Retain Cycle的解决方法

本文不讲block如何声明及使用&#xff0c;只讲block在使用过程中暂时遇到及带来的隐性危险。 主要基于两点进行演示&#xff1a; 1.block 的循环引用(retain cycle) 2.去除block产生的告警时&#xff0c;需注意问题。 有一次&#xff0c;朋友问我当一个对象中的block块中的访问…
阅读更多...
【PyQt5】QT designer + eclipse 集成开发

【PyQt5】QT designer + eclipse 集成开发

【写在前面的话】 考虑将pyqt5的界面开发qt designer 集成在eclipse中&#xff0c;并且&#xff0c;不利用cmd命令行进行转换。 【工具】 1、pyqt5 2、qt designer 3、eclipse pydy 【步骤】 1、首先配置Qt designer。 菜单 run-->external Tools-->External tools confi…
阅读更多...
iOS UIlabel文字排版（改变字间距行间距）分类

iOS UIlabel文字排版（改变字间距行间距）分类

在iOS开发中经常会用到UIlabel来展示一些文字性的内容&#xff0c;但是默认的文字排版会觉得有些挤&#xff0c;为了更美观也更易于阅读我们可以通过某些方法将UIlabel的行间距和字间距按照需要调节。 比如一个Label的默认间距效果是这样&#xff1a; 然后用一个封装起来的Cat…
阅读更多...
iOS 富文本风格NSMutableParagraphStyle、定制UITextView插入图片和定制复制

iOS 富文本风格NSMutableParagraphStyle、定制UITextView插入图片和定制复制

问题一 开发过程中&#xff0c;经常会遇到动态计算行高的问题&#xff0c; - (CGRect)boundingRectWithSize:(CGSize)size options:(NSStringDrawingOptions)options attributes:(nullableNSDictionary<NSString *, id> *)attributes context:(nullable NSStringDrawingC…
阅读更多...
线程模块

线程模块

信号量 from threading import Semaphore,Thread import timedef func(a,b):time.sleep(1)sem.acquire()print(ab)sem.release()sem Semaphore(4) for i in range(10):t Thread(targetfunc,args(i,i5))t.start() 信号量事件 # 事件被创建的时候&#xff0c;默认为False状态 #…
阅读更多...
React中级学习（第一天）

React中级学习（第一天）

Props深入 children 作用 : 获取组件标签的 子节点获取方式 : this.props.children <App>此处的内容&#xff0c;就是组件的 children&#xff0c;将来通过组件的 props.children 就可以获取到这些子节点了 </App>props 校验 作用&#xff1a;规定组件props的类…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023