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，一经查实，立即删除！

相关文章

python安装pyautogui遇到的gbk异常解决

python安装pyautogui遇到的gbk异常解决

一开始使用pip install pyautogui,报错,大概信息如下: Collecting pygetwindow (from pyautogui) Using cached https://files.pythonhosted.org/packages/01/ed/56d4a369c6e18f6b239d9ef37b3222ba308bfebf949571b2611ff7d64f1d/PyGetWindow-0.0.4.tar.gz ERROR: Complete …
阅读更多...
NSString的各种用法总结（创建、截取、判断比较、转化数据类型、拼接、替换、添加、追加、读取、写入、删去、改变）

NSString的各种用法总结（创建、截取、判断比较、转化数据类型、拼接、替换、添加、追加、读取、写入、删去、改变）

1、创建字符串1&#xff09;NSSring *str ”adf”;2&#xff09;NSString *str1 [NSString new];NSString *str2 [[NSString alloc] initWithString:”adf”]; &#xff08;等同于1&#xff09;4&#xff09;NSString *str3 [NSString stringWithFormat:”name is %”,”小…
阅读更多...
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预览和显示文档。同…
阅读更多...
webpack — 概述 （2）

webpack — 概述 （2）

webpack学前必备 webpack中文网 webpack官网 1. Webpack 介绍 Webpack 是什么?? (面试) 前端模块化打包工具WebPack可以看做是模块打包机&#xff1a;它做的事情是&#xff0c;分析你的项目结构&#xff0c;找到JavaScript模块、其它的一些浏览器不能直接运行的拓展语言…
阅读更多...
VUE安装依赖命令总结

VUE安装依赖命令总结

以下是个人用到过的vue安装包以及依赖命令&#xff08;在接触项目时&#xff0c;有未写到的会随时补充&#xff09; 1. vuex 作用&#xff1a;vue状态管理 安装&#xff1a;npm install vuex --save 开源地址&#xff1a;github 文档&#xff1a;https://vuex.vuejs.org/zh/ 2.…
阅读更多...
SQL总结(快速参考)

SQL总结(快速参考)

SQL 语句 语句 语法 AND / OR SELECT column_name(s) FROM table_name WHERE condition AND|OR condition ALTER TABLE (add column) ALTER TABLE table_name ADD column_name datatype ALTER TABLE (drop column) ALTER TABLE table_name DROP COLUMN column_name AS (alias…
阅读更多...
Vue -项目创建（rem适配项的设置）

Vue -项目创建（rem适配项的设置）

3. 项目rem 配置 ####3.1 rem介绍 小米、京东、携程 m.mi.com/m.jd.com/m.ctrp.com 核心原理 1rem 当前 html 的fontSize也就是说 : rem是相当于根元素的字体大小// 使用div {width:2rem;height:2rem}// 媒体查询media (min-width:320px) {html {font-size : 20px}}media (mi…
阅读更多...
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…
阅读更多...
Git 的介绍简介

Git 的介绍简介

使用 git 管理我们的项目并上传到码云 ##1. 本地管理 本地工作区 git add >暂存区 git commit > 仓库区 git status : 查看我们的状态 查看到很多红色的 (有修改的 有删除的 有添加的) git add . : 把当前所有文件添加到暂存区 git commit -m xxx 把代码从暂存区 提交…
阅读更多...
【王俊杰de人工智能实战课】第7次作业2

【王俊杰de人工智能实战课】第7次作业2

Brief Guide 项目内容这个作业属于哪个课程北航人工智能实战课这个作业的要求在哪里第三次作业要求我在这个课程的目标是获得机器学习相关的完整项目与学习经验&#xff1b;通过与人工智能行业的大牛们聊天了解行业不同方向的发展以便进行职业规划&#xff1b;为转CS积累基础知…
阅读更多...
让UITableView的section header view不悬停的方法

让UITableView的section header view不悬停的方法

当 UITableView 的 style 属性设置为 Plain 时&#xff0c;这个tableview的section header在滚动时会默认悬停在界面顶端。取消这一特性的方法有两种&#xff1a; 将 style 设置为 Grouped 。这时所有的section header都会随着scrollview滚动了。不过 grouped 和 plain 的样式…
阅读更多...
Promise 的基本使用 与 Ajax的jQuery封装

Promise 的基本使用 与 Ajax的jQuery封装

Promise 的基本使用 为了解决回调地狱问题&#xff0c;从而给出的解决办法&#xff1a; /*** Promise** 1. Promise 是 一个构造函数 new Vue()* 2. Promise() 里面有个参数, 参数就是一个回调 () > {}* 回调也有参数* resolve f 操作成功的时候调用resolve > …
阅读更多...
个人冲刺9

个人冲刺9

1.昨天做了界面整体优化。 2.今天打算了解一下组成员的情况。 3.整体界面优化没有什么问题。转载于:https://www.cnblogs.com/Evak/p/10936840.html
阅读更多...
iOS UITextField使用全攻略

iOS UITextField使用全攻略

//初始化textfield并设置位置及大小 UITextField *text [[UITextField alloc]initWithFrame:CGRectMake(20, 20, 130, 30)]; //设置边框样式&#xff0c;只有设置了才会显示边框样式 text.borderStyle UITextBorderStyleRoundedRect; typedef enum { UITextBorderStyleNone…
阅读更多...
最新文章

Copyright @ 2022~2023