2021.12.10 vue vue-cil (12)

单文件组件

在很多 Vue 项目中，我们使用Vue.component 来定义全局组件，紧接着挂载到vue实例中。

这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：

全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
字符串模板 (String templates) 缺乏语法高亮，多行HTML写起来蛋疼菊紧
不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用预处理器，如 Pug (formerly Jade) 和 Babel

文件扩展名为 .vue 的 single-file components(单文件组件) 为以上所有问题提供了解决方法

单文件组件使用准备

浏览器默认原生是不支持.vue文件的, 所以我们需要在本地进行一些处理操作之后, 才能在浏览器里面运行, 这些处理操作就需要使用到一些管理工具, 比如npm/cnpm/vue-cli/webpack等:

安装npm

npm是node package manager的缩写, 就是一个基于node的包管理器, 这也是node社区使用最广泛的包管理器,这个一般在安装node的时候,就内置了

安装cnpm

由于众所周知的网络问题, npm非常慢, 而且容易断线, 所以用cnpm的话就阔以避免这个问题
安装指令:npm install –g cnpm –-registry=https://registry.npm.Taobao.org

安装vue-cli

安装指令:cnpm install –g @vue/cli

什么是Vue-CLI(Command Line Interface)?

Vue-CLI是vue官方提供的脚手架工具,默认已经帮我们搭建好了一套利用webpack管理vue的项目结构.

通过脚手架创建项目:

在vue-cli2.x中生成的项目结构中,我们能够看到build文件夹和config文件夹,这两个文件夹中存储了webpack相关的配置,我们可以针对项目需求修改webpack配置(vue init webpack demo)

在vue-cli3以后生成的项目结构中,已经没有了buil文件夹和cinfig文件夹,这样做的目的是为了化繁为简,让初学者不用关心webpack,值用关心如何使用vue,这也是vue-cli设计的初衷:对于那些不懂webpack的人来说,Vue-cli就直接把所有的webpack的配置都给隐藏起来, 就暴露一些比较简单的接口, 以减少用户的使用难度

项目文件结构

Vue-cli的配置文件

Vue的脚手架在把webpack给隐藏之后, 我们要想进行一些精细化配置,可以自己新建一个vue.config.js文件,然后自行配置,但是,但是!!!这个配置文件里面使用的是vue给咱们提供的一些接口,不能把webpack的原生配置直接拿过来用.

Vue-cli的基本配置信息之publicPath

Type:string----- Default:’/’

默认情况下，VueCLI 会假设你的应用是被部署在一个域名的根路径上，例如 http://localhost:8081/。如果应用被部署在一个子路径上，你就需要用这个选项指定这个子路径。例如，如果你的应用被部署在http://localhost:8081/main，则设置 publicPath为 /main/。

这个值也可以被设置为空字符串 (’’) 或是相对路径(’./’)，这样所有的资源都会被链接为相对路径，这样打出来的包可以被部署在任意路径

Vue-cli的基本配置信息之outputDir

Type:string------Default:‘dist’

当运行 vue-cli-servicebuild 时生成的生产环境构建文件的目录。

module.exports={publicPath:'./',outputDir:'./bundle',
}

Vue-cli的基本配置信息之assetsDir/indexPath/filenameHashing

assetsDir

放置生成的静态资源(js、css、img、fonts)的目录。

key:assetsDir

Type:string

Default:’’

indexPath

指定生成的 index.html的输出路径

key:indexPath

Type:string

Default:‘index.html’

filenameHashing

生成的静态资源后面是否生成加上哈希值

key:filenameHashing

Type:boolean

Default:true

Vue-cli的基本配置信息之css

Vue-cli里面对css的操作基本独立了出来,将各种各样的基本配置给进行了简化,这给我们的日常开发极大的减轻了负担

2021.12.10 vue vue-cil (12)相关推荐

12.10 Nginx访问日志 12.11 Nginx日志切割 12.12 静态文件不记录日志和过期时间
- 12.10 Nginx访问日志 - 12.11 Nginx日志切割 - 12.12 静态文件不记录日志和过期时间# 12.10 Nginx访问日志 - 日志的格式- vim /usr/local/ ...
6月8日任务（12.10 Nginx访问日志 12.11 Nginx日志切割 12.12 静态文件）
课程名称:12.10 Nginx访问日志笔记内容: [root@localhost ~]# vim /usr/local/nginx/conf/nginx.conf 定义日志格式 combined_ ...
Vue packages version mismatch: - vue@2.6.12 (C:\Users\Administrator\WebstormProjects\memorial\node_m
背景: INFO Starting development server-10% building 2/2 modules 0 activei ｢wds｣: Project is running at ...
2021年10月11月总结12月计划
2021年10月11月总结12月计划综合评价: 面子并不值钱.不要动不动就觉得伤自尊了.不要让面子问题成为自己的负资产.什么事情理性一些,做自己觉得最正确的事情,不要为了所谓的面子,而让自己吃亏,反 ...
排名前10的vue前端UI框架框架值得你掌握
https://segmentfault.com/a/1190000015423178?utm_source=tag-newest vue常用ui框架推荐 pc: • element-ui (star ...
狂神学习系列10：Vue
狂神学习系列10:Vue 声明: 本文章是基于狂神的课程所编写,本人才疏学浅,内容仅作参考项目和markdown文件资料: 06_Vue: 基于狂神说vue的项目及笔记文章目录狂神学习系列10: ...
python前端框架vue_排名前10的vue前端UI框架框架值得你掌握
之前得到消息vue在GitHub已经超过react,成为第一大框架,让我们来看看以vue为基础的开发框架有哪些? Element(start-28128) 饿了么前端推出的基于 Vue.js 2.0 ...
Ubuntu 12.10 安装 jdk-7u10-linux-x64.tar.gz
2019独角兽企业重金招聘Python工程师标准>>> http://www.linuxidc.com/Linux/2012-12/76532.htm 在Ubuntu 12.10下安 ...
VMware Workstation 9下基于Ubuntu 12.10服务器版本的Hadoop集群的配置
(主要参照http://os.51cto.com/art/201211/363116.htm) 一.概述其实,网上关于Hadoop集群的配置的资料不可谓不少,但是,细细找来,多半是在有图形桌面的环境 ...
[Ubuntu 12.10] Openstack 多节点安装--前期准备网络拓扑
为什么80%的码农都做不了架构师?>>> 研究openstack也有一段时间了,写了一大堆笔记都没整理,最近要把开发机迁移到openstack上试试,安装一个多节点玩玩,也方便 ...

2021.12.10 vue vue-cil (12)

2021.12.10 vue vue-cil (12)相关推荐

最新文章

热门文章