前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue2.脚手架

Vue2.脚手架

作者头像
WuShF
发布2024-01-14 10:14:35
910
发布2024-01-14 10:14:35
举报
文章被收录于专栏:笔记分享笔记分享
  1. 全局安装:npm i @vue/cli -g
  2. 检查是否成功安装:vue --version
  3. 新建项目:vue create 项目名

通过nodejs安装的时候,可以直接代理和仓库,~/.npmrc文件内容如下:

代码语言:javascript
复制
proxy=socks5://127.0.0.1:7897
registry=https://registry.npmmirror.com

socks5://127.0.0.1:7897设置代理,因为我的电脑是监听的本地端口7897 https://registry.npmmirror.com注册表,设置仓库位置,这个是淘宝的仓库。 工程化开发中,不再直接编写模板语法,而是通过App.vue提供结构渲染。

main.js

代码语言:javascript
复制
import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = true

new Vue({
  render: h => h(App),
}).$mount('#app')

import Vue from 'vue'导入Vue核心包。 import App from './App.vue'导入App.vue根组件。 Vue.config.productionTip = true是否提示当前环境:生产/开发。 .$mount('#app')el:'#app',用于指定Vue所管理的容器。 render: h => h(App),基于App创建元素结构,完整写法为:

代码语言:javascript
复制
render:(createElement)=>{
  return createElement(App)
}

箭头函数只有一句话,可以省略return和花括号。

组件化开发

一个页面可以拆分成一个个组件,每个组件都有自己独立的结构、样式、行为。 根组件:整个应用最上层的组件,包裹所有普通小组件。 App.vue文件组成:

  • template:结构
  • script:js逻辑
  • style:样式
image.png
image.png

less

  1. style加上lang="less"
  2. 安装依赖包less

yarn add less less-loader -D

组件注册

一般都用局部注册,如果发现确实是通用组件,再抽离到全局。

  • 局部注册:只能在局部使用
  • 全局注册:所有组件内都能使用

局部注册

在vue组件中局部注册。 在使用的组件内导入: components:{}

image.png
image.png

全局注册

在main.js中全局注册。 import导入语句写在最上面(代码规范)。 import AppHeader from './components/AppHeader.vue';

  • 结尾的.vue可加可不加。

Vue.component('AppFooter',AppFooter);

image.png
image.png

关于position

MDN文档:https://developer.mozilla.org/en-US/docs/Web/CSS/position 如果是header,适合用sticky。

CV自文档: The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements. This value always creates a new stacking context. Note that a sticky element “sticks” to its nearest ancestor that has a “scrolling mechanism” (created when overflow is hidden, scroll, auto, or overlay), even if that ancestor isn’t the nearest actually scrolling ancestor. A stickily positioned element is an element whose computed position value is sticky. It’s treated as relatively positioned until its containing block crosses a specified threshold (such as setting top to value other than auto) within its flow root (or the container it scrolls within), at which point it is treated as “stuck” until meeting the opposite edge of its containing block.

该元素根据文档的正常流程定位,然后根据顶部、右侧、底部和左侧的值,相对于其最近的滚动祖先和包含块(最近的块级祖先)进行偏移,包括与表格相关的元素。偏移不会影响任何其他元素的位置。 该值始终会创建一个新的堆叠上下文。请注意,粘性元素会 "粘附 "到离它最近的、具有 “滚动机制”(在溢出为隐藏、滚动、自动或叠加时创建)的祖先上,即使该祖先不是离它最近的、实际滚动的祖先。 粘性定位元素是一种计算位置值为粘性的元素。它被视为相对定位元素,直到其包含块在其流根(或其滚动的容器)内越过指定阈值(如将顶部设置为自动以外的值),此时它被视为 "粘住 "元素,直到遇到其包含块的对边。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2024-01-13,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • main.js
  • 组件化开发
    • less
    • 组件注册
      • 局部注册
        • 全局注册
        • 关于position
        相关产品与服务
        容器服务
        腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档