Vue前端框架学习与实践,-优快云博客

本文链接：https://blog.youkuaiyun.com/2201_75542278/article/details/134886827

Vue是一款非常优秀的前端框架，它的双向数据绑定和组件化开发的特性让我们在开发过程中更加高效和便捷。在本次学期中，我通过学习Vue的基础知识，掌握了Vue的常用指令、组件、路由等知识点，并且通过实践用到了项目中。

在这门课程中让我学会怎样搭建Vue环境以及了解搭建Vue环境的注意事项和一些心得体会，主要有：

1.前端使用Vue框架有两种方式：

（1）简单的页面，可以通过<script>引入CDN资源来使用。

（2）从项目可维护和拓展性上看，搭建本地调试环境来构建Vue项目会更加合适。

2.直接引入CDN

在前端页面中引入Javascript代码片段，直接引入CDN的方式来使用Vue

<IDOCTYPEhtml><html lang="en-US">
<head>
<meta charset="utf-8" /><meta name="viewport"content="width=device-widthinitia-scale=1" /> <title>Vue直接引入Script资源</title><引入CDN资源--><script src="https://cdnjsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">{[ message ]</div>
<script>
// 初始化 Vue 实例new Vue({el: "#app"
data() {
return {
message:"欢迎来到Vue的世界"
2
;
</script>
</body>
</html>

浏览器在解析了Vue 框架的代码并执行之后，我们通过new Vue(启动了一个 Vue 根实例，而divid的message变量也被替换成了对应的值。

3.Vue CLI

脚手架使用Vue 框架脚手架一般会优先选择官方提供的 Vue CLI，Vue CLI其实也是基于 Webpack 封有了脚手架，我们可以通过简单的命令就能快速生成 Demo代码、构建本地测试环境、编译和打包代码、发布到现网等功能。

// 安装脚手架
npm install -g @vue/cli
//脚手架生成vue项目，同时会自动安装依赖

vue create vue-cli-demo生成之后的代码目录:

Vue CLI V3.10.0Creating project in C: Users \Desktop\桌面文件 code helloword.Installing CLI plugins. This might take a while...
added 845 packages in 17sInvoking generators..Installing additional dependencies...
added 3 packages in 2sRunning completion hooks...
Generating README.md...
Successfully created project helloword.Get started with the following commands:
cd hellowordnpm run serve
:\Users\Desktop\桌面文件\code>cd helloword
:Users\ Desktop\桌面文件 code helloword>npm run serve
helloword@0.1.0 servevue cli-service serve
INFOStarting development server...
DONECompiled successfully in 4774ms
App running at:Local:http://localhost:8080Network: http://192.168.0.102:8080
Note that the development build is not optimizedTo create a production build, run npm run build.

局部注册可通过在实例中的components选项进行配置
// 获取组件
import MyComponent from "../components/my-button":
new Vue({
components:{ MyComponent}

});

而以这种方式使用组件的时候，则需要在组件里通过name选项进行命名
// my-button.vue
new Vue(!
name:"my-button"
});

这种方式定义的组件，如果也进行了全局注册，其命名会以全局注册的名字为准，也就是全局注册的命名优先级更高。

4.单文件组件
一个组件是一些逻辑和功能完整的代码片段组成的，同时也包括了 HTML、CSS和组件，使用.vue 后缀命名的文件，一般也包括这三部分:
<template>

</template>
<script>
// 组件逻辑
// 在vue文件中，需要默认export一个Vue实例
export default {
name:"MyComponent"
</script>
<style>
/组件样式*/

总之这个课程让我受益匪浅，不仅学习了Vue的基础知识和相关技能，还学习了如何进行团队协作和版本控制。我相信这些知识和技能在我未来的开发工作中会起到非常重要的作用。