首页 > 其他分享 >Vue-Cli笔记

Vue-Cli笔记

时间:2023-06-06 09:12:03浏览次数:45  
标签:文件 Vue Cli 项目 笔记 选择 vue 模式 组件

Vue-Cli笔记

新手上路

在创建模式的时候,选择最后一个模式:自定义模式,创建项目,只需勾选下图3个配置,使用空格进行选择和不选择。

image-20220426201153396

然后选择vue版本2.x

在选择css预编译中选择less

image-20220513230701447

最后选择是否将babel、Eslint等文件放到一个独立的文件中或放入package.json,我们选择第一项独立的文件

image-20220426201624779

以上这些配置最后会提示是否进行预设。

我进行了保存,这个预设名字叫newer,以后关键以上配置的项目,直接选择newer即可。

vue-cli 的使用

  1. 在终端下运行如下的命令,创建指定名称的项目:

    vue create 项目的名称
    
  2. vue 项目中 src 目录的构成:

    assets 文件夹:存放项目中用到的静态资源文件,例如:css 样式表、图片资源
    components 文件夹:程序员封装的、可复用的组件,都要放到 components 目录下
    main.js 是项目的入口文件。整个项目的运行,要先执行 main.js
    App.vue 是项目的根组件。
    

    image-20220427094308767

组件化开发

组件内的data必须是个函数,且数据通过return传给父组件

image-20220427095136919

name属性

image-20220429094757642

eslint安装和使用

去官网上查想要的语法规范:http://eslint.cn/docs/rules/

该插件用于自定义设置检查语法规范,能够设置区分开发模式和生产模式两张不同的规则

image-20220429202446618

由于选择了独立文件,在创建完成之后,会生成一个eslint文件

image-20220429202527661

该文件中的rules可以自定义设置代码规则

当是生产模式的时候,提示警告warn

当是开发模式的时候,规则关闭off

image-20220429202601890

标签:文件,Vue,Cli,项目,笔记,选择,vue,模式,组件
From: https://www.cnblogs.com/lost-ways/p/17459574.html

相关文章

  • javascript笔记
    javascript笔记获得焦点onfocus,失去焦点onblurisNaN()判断是非数字undefined和数字相加最后的结果是NaNnull和数字相加最后的结果是数字typeof空格变量名或typeof(变量名)可以检测变量的类型parseInt('120.8px')最后的结果是120->数字;自动去掉px......
  • Vue自定义指令-让你的业务开发更简单
    1、使用场景在日常开发中,我们会将重复代码抽象为一个函数或者组件,然后在需要时调用或者引入。但是,对于某些功能,这种方法可能不够优雅或者不够灵活。例如,我们可能需要在DOM元素上添加一些自定义属性或者绑定一些事件,这些操作可能难以通过函数或组件来实现。这时,自定义指令就派上用......
  • 【VUE】Vue事件与表单处理02
    一、事件与表单处理1、v-on监听事件<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"......
  • Vue router 二级默认路由设置
    一、起因打开默认地址/(http://localhost:5432/),home页面有空白,因为没有指定默认打开的子页。//router.jsexportconstconstantRoutes=[{path:'/',component:()=>import('@/views/MainView'),name:'Index',met......
  • Java官方笔记7接口
    接口接口只能包含:constants,methodsignatures(abstract),defaultmethods,staticmethods,andnestedtypes方法体只存在于:defaultmethodsandstaticmethods接口不能实例化,只能被类实现,或者被其他接口继承(接口可以多继承)。定义接口:publicinterfaceOperateCar{/......
  • 【VUE】Vue 快速入门 笔记基础01
    一、vue相关了解1、概述Vue.js是一种流行的JavaScript框架,用于构建响应式、交互式的前端Web界面。它采用了基于组件的开发模式,允许在单个页面中使用多个可重用的组件,提高了代码的复用性和维护性。只关心视图层,自底向上.遵守SOC关注点分离原则(术有专攻,只关注一点)HTML+CSS......
  • 《深入理解Spring Cloud与微服务构建》学习笔记(二十)~配置中心Spring Cloud Config
    本例重新创建项目,构建一个空的mavan工程。一、ConfigServer从本地读取配置文件 新建一个moudleconfig_server,pom添加依赖1.2.<groupId>org.springframework.cloud</groupId>3.<artifactId>spring-cloud-config-server</artifactId>4.</dependency>启动类添加......
  • post请求方式 - 抖音生活服务 使用restTemplate而不使用httpClient
    publicstaticStringdoPostForJson(Stringurl,Stringjson,StringbyteAuthorization){RestTemplaterestTemplate=newRestTemplate();logger.info("restTemplateinvokepostmethod.url:[{}],json:[{}]",url,json);long......
  • vue之三种与后端交互的方式
    目录一、vue与后端交互之Ajax情况一:出现了跨域问题前端:index.html后端:main.py情况二:解决了跨域问题前端:index.html二、vue与后端交互之fetch简介fetch介绍后端:main.py前端:index.html三、vue与后端交互之axios1.简介html前端一、vue与后端交互之Ajax情况一:出现了跨域问题前端:in......
  • windows笔记本极致省电指南
    用到了三个软件:parkcontrol,processlasso,quickCPUparkcontrol-调整CPU的运行核心和频率,可以设置离电的时候关闭一些CPU核心数,以达到省电的目的插电的时候是全核心运行,离电的时候只有一个核心两个线程在运行。在显示高级设置里,设置使用的核心数,为了极致省电,把电池模式下的......