目录
vue:
Vues是一款用于构建用户界面的渐进式的JavaScript框架
create-vue
介绍:create-vue是Vue官方提供的最新的脚手架工具,用于快速生成一个工程化的Vue项目
create-vue提供了以下功能:
1.统一的目录结构
2.本地调试
3.热部署
4.单元测试
5.集成打包上线
依赖环境:NodeJs
npm:Node Packge Manager,是NodeJs的软件包管理器
Vue项目-创建:
1.安装NodeJS
2.双击msi文件,点击我接受
3.选择安装到一个没有中文,没有空格的目录下(新建一个文件夹NodeJS)
4.点击Next,下一步下一步的安装即可
5.验证NodeJS的环境变量: node -v
6.配置npm的全局安装路径: npm config set prefix "NodeJS的安装目录"
7.切换为淘宝镜像: npm config set registry https://registry.npmmirror.com
8.执行命令:npm create vue(创建项目)
9.npm install(安装依赖)
10.用VS Code打开Vue项目
11.npm run dev(启动项目)
Vue项目-项目结构:
node_modules:下载的第三方包存放目录。
src:源代码存放目录(写代码的文件夹)。
package.ison:项目配置文件,包括项目名,版本号,依赖等。
vite.config.js:Vue项目的配置信息,如端口号等。
assets:静态资源目录,存放图片,字体...。
components:组件文件,存放通用文件。
App.vue:根组件。
main.js:入口文件。
项目流程:
入口文件(main.js)引入根组件(App.vue)并接管默认首页(index.html)
API风格:
Vue的组件有两种不同的风格: 选项式API和组合式API
组合式API写法:
<script setup>
improt {ref,onMounter} 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写法:
<script>
export default{
data(){
//声明响应式对象
return{
count:0
}
},
method:{
//声明方法,可以通过组件实例访问
increment: function(){
this.count++;
}
},
mounted(){
//声明钩子函数
console.log('Vue mounted ...');
}
}
</script>
<template>
<button @click="increment">count:{{count}}</button>
</template>说明:
选项式API:可以用包含多个选项的对象来描述组件的逻辑,如data,method,mounted等。选项定义的属性都会暴露在函数内部的this上,它会指向当前的组合实例。
组合式API:是Vue3提供的一种基于函数的组件编写方式,通过使用函数来组织和复用组件的逻辑,它提供了一种更灵活,更可组合的方式来编写组件
setup:是一个标识,告诉Vue需要进行一些预处理,让我们可以更简洁的使用组合式API
ref():接收一个内部值,返回一个响应式的ref对象,此对象只有一个指向内部值的属性value
onMounted:在组合式API中的钩子方法,注册一个回调函数,在组件挂载完成后执行
在vue中的组合式API使用时,是没有this对象的,this对象是undefined
在组合式API中更新响应式数据内容使用xxx.value属性
ElementPlus:
准备工作:
1.创建vue项目
2.参照官方文档,安装Element Plus组件库(在当前工程的目录下):npm install element-plus --save
3.main.js中引入Element Plus组件库(参照官方文档)
默认Element Plus的组件是英文的,如果希望使用中文语言,可以做如下配置:
//引入中文语言
import zhCn from 'emement-plus/es/locale/lang/zh-cn'
createApp(App).use(ElementPlus,{locale: zhCn}).mount('#app')Dialog对话框组件使用的关键点:
提供model-value/v-model给点的boolean值,来控制Dialog的显示与隐藏
表单组件使用的关键点:
表单项数据采集:v-model 数据绑定
表单数据提交:事件绑定