当前位置：首页 > news >正文

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

news 2025/8/4 5:26:08

环境准备

介绍：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  响应式对象有一个内部的属性valueconst count = ref(0); //在组合式api中,一般需要把数据定义为响应式数据//const count=0;//声明函数function increment(){count.value++;}//声明钩子函数 onMountedonMounted(()=>{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元素