• vue的工程化开发全流程，以及开发中的细节语法和用法

    vue的工程化开发全流程

    文章目录

    1、工程化开发&脚手架Vue CLI

    1.1、前言

    开发Vue的两种方式:

    1. 核心包传统开发模式:基于html / css / js 文件，直接引入核心包，开发Vue。

    2. 工程化开发模式:基于构建工具（例如: webpack )的环境中开发Vue。

    image-20230914210404013

    1.2、脚手架Vue CLI

    基本介绍:

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

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

    使用步骤:

      1. 全局安装(一次): yarn global add @vue/cli或npm i @vue/cli -g
      1. 查看Vue版本: vue --version
      1. 创建项目架子: vue create project-name(项目名-不能用中文)
      1. 启动项目: yarn serve 或 npm run serve(找package.json)

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

    项目的目录：

    image-20230914214956923

    项目的运行流程：

    image-20230915204632794

    • main.js的核心代码：

      // 作用：导入App.vue，基于App.vue创建结构渲染index.html
//1.导入vue核心包
import Vue from 'vue'

//2、导入App根组件 
import App from './App.vue'

// 在控制台中提示：当前处于什么环境（生产环境、开发环境）
Vue.config.productionTip = false

//3.Vue实例化，提供render方法->基于App.vue结构渲染index.html
new Vue({
  //el: '#app'，作用:和$mount('选择器)作用一致，用于指定vue所管理容器
  // render: h => h(App),//简写模式，下面为全写，createElement为形参
  render: (createElement) => {
    //  基于App创建元素结构
    return createElement(App)
  }

}).$mount('#app')

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20

    • index.html的核心代码：

    DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  title>
head>

<body>
    
  
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.strong>
  noscript>

  
  <div id="app">
    
  div>
      
  
body>

html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    1.4、组件化开发&根组件

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

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

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

    组件化开发图示：

    image-20230915205130029
    • 一个根组件App.vue，包含的三个部分:
      1. template结构(只能有一个根节点)
      2. style 样式(可以支持less，需要装包 less和less-loader )
      3. script行为

    1.5、普通组件的注册使用

    组件注册的两种方式:

    1. 局部注册：只能在注册的组件内使用
      1. 创建.vue文件(三个组成部分)
      2. 在使用的组件内导入并注册
    2. 全局注册：所有组件内都能使用
      1. 创建.vue文件(三个组成部分)
      2. main.js 中进行全局注册

    使用：
    当成html标签使用<组件名>
    注意：
    组件名规范→大驼峰命名法，如：Header

    2、工程化开发细则

    2.1、组件的三大组成部分

    1. 结构