vue的前端工程化

vue的前端工程化

---

前言

前面学习的vue的基本知识，仅仅是将其当成js包去引入的，并没有体现出工程化的思想

一、vue脚手架？

脚手架可以理解为工程化工具的工具集（如编译转换工具、代码格式校验工具等）
	1.create-vue （基于vite  ，跟vue3配合更好）
	2. @vue/cli	（基于webpake ，生态更稳定）

二、vue-cli的安装使用

1.安装

命令行符安装：

npm i -g @vue/cli

若显示版本号，则表明安装成功

2.使用

2.1构建工程

命令行如下：

vue create clidemo

构建工程完毕：

2.2打开

3简单实例

3.1 清理相关样式

3.2 创建组件

基本结构：

3.3编写组件

<template>
    <!-- 组件模板写入区 -->
     <div>
        <button @click="handleClick">点击了{{ count }}次</button>
     </div>
</template>

<script>
    //向外导出组件对象

    // 使用ES6的模块化导出语法，导出组件配置对象
    export default{
        // 组件名称，与文件名同名
        name:'TheCounter',

        data(){
            return{
                count:0,
            }
        },

        methods:{
            handleClick(){
                this.count++;
            }
        }
    }
</script>

<style scoped>
/* 组件css样式 */
</style>

3.4挂载引用组件

app.vue:

<template>
  <div id="app">
    <!-- 3、引用组件 -->
     <the-counter></the-counter>
  </div>
</template>

<script>
// 导入组件对象
import TheCounter1 from './components/TheCounter.vue';

export default {
  name: 'App',
  // 2、挂载组件
  components:{
    // 第一个是组件名字，后面是导入的组件对象
    TheCounter:TheCounter1
  }
}
</script>

<style>

</style>

---