五、工程化开发和脚手架Vue CLI

news2025/10/31 13:27:27

开发 Vue 的两种方式:
1.核心包传统开发模式:基于 html/css/js 文件，直接引入核心包，开发 Vue.
2.工程化开发模式:基于构建工具(例如:webpack)的环境中开发 Vue。

一、基本介绍：

Vue CLl 是 Vue 官方提供的一个可以帮助我们快速创建一个开发 Vue 项目的标准化基础架子。【集成了 webpack 配置)，其实就是生成一个目录，内置了许多工具。

好处：

1.开箱即用，零配置
2.内置 babel等工具
3.标准化

重点！！！！使用步骤：

1.全局安装(一次):yarn globaladd @vue/cli 或 npmi @vue/cli -g

2.查看 Vue 版本:vue --version
3.创建项目架子:vue create project-name(项目名-不能用中文)

4.启动项目:yarn serve 或npm run serve(找package.json)

在命令终端直接根据步骤就能完成创建。

二、项目目录介绍和运行流程

public/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>
    <!-- 兼容：给不支持js的浏览器一个提示 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>

    <!-- Vue所管理的容器：将来创建结构动态渲染这个容器 -->
    <div id="app">
      <!-- 工程化开发模式中：这里不再直接编写模板语法，通过 App.vue 提供结构渲染 -->
    </div>

    <!-- built files will be auto injected -->
  </body>
</html>

src/main.js

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

// 2. 导入 App.vue 根组件
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),
  render: (createElement) => {
    // 基于App创建元素结构
    return createElement(App)
  }
}).$mount('#app')

注意代码块第三部分另一种写法也可以，表达的意思完全一样

src/App.vue

<template>
  <div class="App">
    <div class="box" @click="fn"></div>
  </div>
</template>

<script>
// 导出的是当前组件的配置项
// 里面可以提供 data(特殊) methods computed watch 生命周期八大钩子
export default {
  created () {
    console.log('我是created')
  },
  methods: {
    fn () {
      alert('你好')
    }
  }
}
</script>

<style lang="less">
/* 让style支持less
   1. 给style加上 lang="less"
   2. 安装依赖包 less less-loader
      yarn add less less-loader -D (开发依赖)
*/
.App {
  width: 400px;
  height: 400px;
  background-color: pink;
  .box {
    width: 100px;
    height: 100px;
    background-color: skyblue;
  }
}
</style>

三、组件化开发&根组件

① 组件化:一个页面可以拆分成一个个组件，每个组件有着自己独立的结构、样式、行为
好处:便于维护，利于复用 →提升开发效率，

App.vue文件（单文件组件）的三个组成部分

如果打开的vue代码没有高亮，可以选择下载插件：Vetur

三部分的组成：

template:结构(有且只能一个根元素)
script:js逻辑
style:样式(可支持less，需要装包)

让组件支持 less
(1)style标签，lang="less"开启less功能
(2)装包:yarn add less less-loader -D（如果没有安装yarn命令，可以使用npm add less less-loader -D）

总结：

(1)组件化:

页面可拆分成一个个组件，每个组件有着独立的结构、样式、行为、

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

② 组件分类:普通组件、根组件

(2)根组件:

整个应用最上层的组件，包裹所有普通小组件。
一个根组件App.vue，包含的三个部分
① template 结构(只能有一个根节点) 需要装包 less 和 less-loader )

② style 样式(可以支持less，
③ script 行为