前端开发-Vue Cli脚手架的使用

最新推荐文章于 2023-06-16 11:56:10 发布

薛定谔的量子猫.

最新推荐文章于 2023-06-16 11:56:10 发布

阅读量335

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Wsnbb007/article/details/128154372

版权

Vue Cli脚手架作用:

生成规范的vue项目目录

底层基于webpack, 将后缀名为 .vue 的文件编译成浏览器可以识别的 html文件

安装vue-cli命令: npm install -g @vue/cli

检查有没有安装成功: vue --version

创建vue项目:

在哪里打开黑窗，就在哪里创建项目命令: vue create 项目名称

注意:项目名称不要有中文，也不要有大写字母

选择vue2默认配置

创建成功后在配置文件夹 vue.config.js文件夹中关闭selinet代码检查:

module.exports = {
    // 关闭eslint代码检查
    lintOnSave: false
}

修改服务器端口号(可选)

module.exports = {
  devServer: { // 自定义服务配置
    host:'127.0.0.1',
    open: true, // 自动打开浏览器
    port: 3000
  }
}

右键package.json文件打开终端,运行项目的命令: npm run serve

终端开启之后不要关闭，此时我们修改代码无需重新运行，浏览器会自动刷新

脚手架目录介绍:

vuecil-demo # 项目目录
├── node_modules # 项目依赖的第三方包
├── public # 静态文件目录
├── favicon.ico# 浏览器小图标
└── index.html # 单页面的html文件(网站首页，vue会帮我们配置好，使用较少)
├── src # 业务文件夹(项目核心文件夹，我们写的项目代码都放在这个文件夹里面)
├── assets # 静态资源（一般项目图片、css都放在这里）
└── logo.png # vue的logo图片(没啥用,vue打广告的，可删除)
├── components # 组件目录一般我们写的组件都放在这里）
└── HelloWorld.vue # 欢迎页面vue代码文件（打广告的，可删除）
├── App.vue # 整个应用的根组件（网站首页index.htm默认会渲染这个根组件）
└── main.js # 入口js文件（入口文件，vue实例的创建，根组件的挂载都是在这里完成）
├── .gitignore # git提交忽略配置（默认已经帮我们配置好）
├── babel.config.js # babel配置（ES6转换ES5工具，一般不用管）
├── package.json # 依赖包列表
├── README.md # 项目说明（一般公司代码规范，人员组成之类的可以写在这里）
└── package-lock.json # 项目包版本锁定和缓存地址
└── vue.config.js # 项目webpack配置项

准备工作:

删除HelloWorld.vue文件

清空App.vue文件并输入 ' <> ' 快捷创建组件框架

<template>标签,这里写组件的html结构在里面创建一个div盒子

<script>标签，这里写组件的js代码

<style>标签，这里写组件的css代码

注册局部组件:

组件命名规范:

短横线命名法，例如 hm-header 和 hm-main

大驼峰命名法（推荐），例如 HmHeader 和 HmMain

组件名不能与原生的HTML标签重名

在App.vue文件中

导入局部组件：

在scrip标签中导入

import 组件名 from '组件路径'

挂载组件：

在export default里面写一个属性components

export default {

components: {

"标签名": 组件名

}

}

使用组件：

像标签一样使用即可，组件可以理解为一个自定义标签

<组件名></组件名>

注册全局组件:

在main.js文件中

导入组件:

import 组件名 from '组件文件路径'

注册全局组件:

Vue.component('标签名', 组件名 //注意这里的component不带s

使用组件:

一旦注册全局组件之后，可以在任何组件直接使用，并且不需要导入和挂载

组件CSS作用域scoped属性

默认情况下，如果父组件与子组件有相同的css选择器样式，则父组件的样式会覆盖子组件的样式

scoped属性作用：

如果子组件与父组件有相同样式，则优先加载子组件自身的。如果没有则加载父组件的

scoped原理:

本质是给子组件添加一个唯一的行内自定义属性 data-v-xxx, 然后通过属性选择器来增加css权重

组件的name属性

name属性的作用是给这个组件一个标识符，用于快速查找组件

name属性特点

必须是唯一，不能与其他组件name属性冲突

建议最好与组件名一致

name属性值不能是中文

组件通讯：父件子props

实验步骤:

给子组件添加props属性（与data平级）

作用：类似于声明变量，定义要接收的属性名

在父组件中使用行内自定义 attribute传值 <子组件属性名="属性值"></子组件>

注意点： prop中的属性不能有大写字母，不要使用驼峰命名。建议使用-作为分隔符。

类型验证:

{
  props: {
    // 基础的类型检查
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // -------------------------------------------------------------------------
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
  }
}