创建vue工程、Vue项目的目录结构、Vue项目-启动、API风格

环境准备

• 介绍：create-vue是Vue官方提供的最新的脚手架工具，用于快速生成一个工程化的Vue项目
• create-vue提供如下功能：
  统一的目录结构
  本地调试
  热部署
  单元测试
  集成打包
• 依赖环境：NodeJS
  安装NodeJS

一、 创建vue工程

npm 类似maven
npm init vue@latest
根据命令提示
cd 项目名
npm install
然后用vscode打开项目

二、Vue项目的目录结构

vite.config.js ：Vue项目的配置信息，如：端口号等
package.json ：等同于maven里的pom文件，配置文件，包括项目名、版本号、依赖包、版本等。
package-lock.json ：项目配置文件（不需要修改）
index.html ：默认首页
public： 公共资源
node_modules ：下载的第三方包存在目录
src：源代码存放目录

src下面又有四个目录
assets : 静态资源目录、存放图片、字体
components：组件目录、存放通用组件
App.vue：根组件
main.js ：入口文件

三、Vue项目-启动

执行命令 npm run dev ，就可以启动项目
然后输入http://127.0.0.1:5137
重点编写Vue文件
主要包含三部分内容

控制模板的数据及行为
<script setup>
  import {ref} from 'vue';
  //调用ref函数,定义响应式数据
  const msg = ref('西安');
</script>

模板部分，由它生成HTML
<template>
    <h1>{{ msg }}</h1>
</template>

当前组件的CSS样式
<style scoped>
  /* 样式 */
  h1{
    color: red;
  }
</style>

Vue项目的入口文件，是什么
main.js
Vue的单文件组件中包含那些
三个部分，

<script setup>
</script>

<template>
    <h1>{{ msg }}</h1>
</template>
<style scoped>
  /* 样式 */
  h1{
    color: red;
  }
</style>

四、API风格

Vue的组件有两种不同的风格：组合式API 和 选项式API

选项式API，选项式API，可以用包含多个选项的对象来描述组件的逻辑，如：data，methods，mounted等。
<script>
    export default {
      data(){ //声明响应式对象
        return {
          count: 0
        }
      },
      methods: { //声明方法，可以通过组件实例访问
        increment: function(){
          this.count++ ;
        }
      },
      mounted(){ //声明钩子函数
        console.log('Vue mounted ...');
      }
    }
</script>
<template>
    <button @click="increment">count:{{ count }}</button>
</template>

组合式API
<script setup>
    import { onMounted, ref } from 'vue’; 
    const count = ref(0);  //声明响应式变量
    function increment(){  //声明函数
      count.value++;
    }    onMounted(()=>{ //声明钩子函数
      console.log('Vue Mounted ...’);
    })
</script>
<template>
  <button @click="increment">count:{{ count }}</button>
</template>

Api.vue

<script setup>
    import {ref,onMounted} from 'vue'
    //声明响应式数据 ref  响应式对象有一个内部的属性value
    const count = ref(0); //在组合式api中,一般需要把数据定义为响应式数据
    //const count=0;

    //声明函数
    function increment(){
        count.value++;
    }

    //声明钩子函数 onMounted
    onMounted(()=>{
        console.log('vue 已经挂载完毕了...');
    });
</script>

<template>
    <!-- 写html元素 -->
    <button @click="increment">count: {{ count }}</button>
</template>

然后把这个Api.vue 在App.vue中引入

<!-- <script>
  //写数据
  export default{
    data(){
      return {
        msg:'上海'
      }
    }
  }
</script> -->
<script setup>
  import {ref} from 'vue';
  //调用ref函数,定义响应式数据
  const msg = ref('西安');

  //导入 Api.vue文件
  import ApiVue from './Api.vue'
  //导入Article.vue文件
  import ArticleVue from './Article.vue'
</script>

<template>
  <!-- html -->
  <!-- <h1>北京</h1> -->
  <!-- <h1>{{ msg }}</h1>
  <br>
  <ApiVue/> -->

  <ArticleVue/>
</template>

<style scoped>
  /* 样式 */
  h1{
    color: red;
  }
</style>

组合式Api，一般需要把数据定义为响应式数据
const count = ref(0)

Vue的组件书写分为几种风格
选项式API
组合式API，推荐使用组合式API，用起来更加灵活

Element Plus
Element ：是饿了么团队研发的，基于Vue3，面向设计师和开发者的组件库。
组件：组成网页的部件，例如 超链接、按钮、图片、表格、表单、分页条等
Element Plus快速入门
准备工作：
1、创建一个工程的vue项目
2、参照官方文档，安装Element Plus组件库：
npm install element-plus --save
3、main.js中引入Element Plus 组件库，参考官方文档。

import { createApp } from 'vue'     //导入vue
import ElementPlus from 'element-plus'     //导入element-plus
import 'element-plus/dist/index.css'		 //导入element-plus的样式
import App from './App.vue'                   //导入app.vue
const app = createApp(App)                 //创建应用实例
app.use(ElementPlus)					//使用element-plus
app.mount('#app')						//控制html元素

4、制作组件：
访问Element官方文档，复制组件代码，调整
常用组件-分页条
常用组件-表格组件
常用组件-表单组件
常用组件-Card卡片