Vue快速上手---工程化开发入门（五）

Vue CLI 是 Vue 官方提供的一个全局命令工具。

可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子。【集成了 webpack 配置】

1. 全局安装 (一次) ：pnpm i  @vue/cli  -g

2. 查看 Vue 版本：vue  --version或者 vue -V

3. 创建项目架子：vue  create  project-name（项目名-不能用中文）

4. 启动项目： npm run serve（找package.json）

脚手架目录文件介绍：

VUE-DEMO

│─node_modules 第三包文件夹

├─public                 放html文件的地方

│  ├─favicon.ico 网站图标

│  └─index.html index.html 模板文件 ③

├─src 源代码目录 → 以后写代码的文件夹

│  └─assets 静态资源目录 → 存放图片、字体等

│  └─components   组件目录 → 存放通用组件

│  └─App.vue   App根组件 → 项目运行看到的内容就在这里编写 ②

│  └─main.js   入口文件 → 打包或运行，第一个执行的文件 ①

└─.gitignore     git忽视文件

└─babel.config.js   babel配置文件

└─jsconfig.json js配置文件

└─package.json 项目配置文件 → 包含项目名、版本号、scripts、依赖包等

└─README.md 项目说明文档

└─vue.config.js vue-cli配置文件

└─yarn.lock yarn锁文件，由yarn自动生成的，锁定安装版本

脚手架目录文件介绍 & 项目运行流程

 

组件化开发 & 根组件

① 组件化：一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为。

     好处：便于维护，利于复用 → 提升开发效率。

     组件分类：普通组件、根组件。

② 根组件：整个应用最上层的组件，包裹所有普通小组件。

 

如果不安装以下插件

代码样式是这样的，安装了后有漂亮的高亮效果 

 

<template>

  <!--

    1. 组件中必须要有 template

    2. template 有且只能有一个根节点, 如果需要有多个可以自行嵌套

  -->

  <div>

    <span>你好哇世界!</span>

    <p>{{ msg }}</p>

  </div>

</template>



<script>

// console.log('你好哇')

// 组件中必须对外导出一个对象, 这个对象就是组件实例(也是 Vue 的实例对象)

// 类似于: new Vue({})

export default {

  // 重点: 组件中的 data 必须是函数, 因为组件会被重复使用, 如果是对象, 则会导致多个组件共用同一份数据

  // 现在的 data 依然是存放数据的地方, 只不过必须是函数, 在内部返回一个对象

  data() {

    return {

      msg: '我是消息!'

    }

  }

}

</script>

<style lang="less">

/* 如果需要写 less, 则在 style 标签上添加 lang="less"

  注意: 脚手架默认帮我们配置了 less-loader, 但没有装包, 所以需要自行安装 less 和 less-loader

 */

div {

  span {

    color: green;

    font-size: 36px;

    font-weight: 900;

  }

}

</style>

组件注册的两种方式：

1. 局部注册：只能在注册的组件内使用

   ① 创建 .vue 文件 (三个组成部分),如下图所示

 

文件内的示例代码（随机的一个底部）

<template>

  <div>我是底部</div>

</template>



<script>

export default {

}

</script>

<style scoped>

div{

    background-color: green;

    height: 300px;

}

</style>

  ② 在使用的组件内导入并注册

语法：

  

App.vue里的示例代码

注册-导入-使用

<template>

  <div>

    <!-- 组件使用语法: -->

    <!-- <组件名></组件名> -->

使用

    <HmHeader></HmHeader>

    <HmBody></HmBody>

    <HmFooter></HmFooter>

  </div>

</template>



<script>

导入

import HmHeader from './components/HmHeader.vue'

import HmBody from './components/HmBody.vue'

import HmFooter from './components/HmFooter.vue'

// 注册使用组件

// 0. 新建组件文件, 写好组件功能

// 1. 引入组件

// 2. 注册组件 (全局/局部)

// 3. 使用组件 (和标签一样)

export default {

  // 语法:

  // components: {

  //   组件名: 组件对象

  // }

注册

  components: {

    HmHeader,

    HmBody,

    HmFooter

  }

}

</script>

2. 全局注册：所有组件内都能使用

style 标签上添加一个 scoped, 加上以后表示样式独立, 从此以后 style 的样式只会影响当前组件的元素

示例代码：

<template>

  <div>我是头部

  </div>

</template>

<script>

export default {

}

</script>

<style scoped>

div{

    background-color: pink;

}

</style>

   ① 创建 .vue 文件（如下图所示）

文件内的代码：

<template>

  <button>我是一个按钮</button>

</template>



<style scoped>

</style>

② main.js 中进行全局注册

 

 

main.js里的示例代码：

// 引入 Vue 构造函数

import Vue from 'vue'

// 引入 App.vue 组件

import App from './App.vue'

// 引入组件对象

import HmButton from './components/HmButton.vue'



// 配置 Vue 生产版本的提示信息是否显示, false 表示不显示

Vue.config.productionTip = false

// 全局注册按钮组件

// Vue.component(组件名, 组件对象)

// 组件名遵循大驼峰命名

Vue.component('HmButton', HmButton)

// 创建一个 Vue 实例

new Vue({

  el: '#app', // 指定挂载点, 告诉 Ve 在哪里渲染

  // render: h => h(App), // 挂载什么东西, 把什么东西渲染上去

  render(createElement) {

    // createElement 是一个函数, 它的作用是根据指定的组件创建「元素」

    return createElement(App)

  }

})

// $mount() 和 指定 el 效果一模一样, 原理上也是一样的

// .$mount('#app')

使用：<组件名></组件名>

<template>

  <div>我是底部

    <HmButton></HmButton>

  </div>

</template>



<script>

export default {

}

</script>

<style scoped>

div{

    background-color: green;

    height: 300px;

}

</style>