Vue学习之路：初识vue（一）

拉布拉多拉的多
354 阅读4分钟

Vue简介

Vue.js自2014年创建以来，在前端领域发展迅速，成为最受欢迎的JavaScript框架之一，很多企业和开发者选择 Vue 作为他们的首选框架，由于 Vue 提供了清晰的学习路径和文档，使得新手也能快速上手，同时对于有经验的开发者来说，Vue 的灵活性和强大的功能集也足以应对各种复杂的开发需求，所以学习Vue是前端开发必学的框架之一。

初识Vue

实现动态改变一个数值：

  • 纯JS版
<body>
    <h2 id="h2">0</h2>
    <button id="minus">-1</button>
    <button id="add">+1</button>
    <script>
        let minus = document.getElementById('minus');
        let add = document.getElementById('add');
        let count = 0;
        minus.addEventListener('click',()=>{
            count--;
            h2.innerText = count;
        })
        add.addEventListener('click',()=>{
            count++;
            h2.innerText = count;
        })
    </script>
</body>
  • Vue框架版：
<body>
    <div id="app"></div>
    <script>
        const { createApp } = Vue
        createApp({
            template:`<h2 id="h2">{{count}}</h2>
                    <button id="minus" @click='minus'>-1</button>
                    <button id="add" @click='add'>+1</button>`,
            data: function() {
                return {  // 响应式
                    count: 10
                }
            },
            methods:{
                minus(){
                    this.count--
                },
                add(){
                    this.count++
                }
            }
        }).mount('#app')
    </script>
</body>

在这里，Vue版本看上去，代码行数较多，结构较复杂，但是相比于纯JS而言，Vue不需要频繁的去操作DOM元素，这大大优化了浏览器性能问题和用户体验，在大型项目里，Vue的优势就不言而喻了。

  • const { createApp } = Vue 首先从Vue库中导入了createApp函数，这是Vue 3中创建应用程序的主要方式。

  • 然后使用createApp函数创建了一个新的Vue应用实例。应用实例包含了以下内容：

    1. template: 定义了应用的HTML模板。<h2>标签用于显示计数器的值（使用{{count}}插值表达式），按钮上的@click指令绑定了对应的事件处理器。
    2. data: 定义了应用的数据属性。count是一个响应式属性，初始值为10。
    3. methods: 定义了应用的方法。这里有两个方法，minus和add，分别用于递减和递增count的值。这两个方法通过@click指令与模板中的按钮绑定。

在函数的最后不要忘了.mount('#app')将创建的应用挂载到页面中ID为app的元素上，使应用生效并显示在页面中。这就是一个简单的Vue3中主要创建应用程序的方式。

创建Vue项目

  • 首先确保你的Node.js在18.3版本及以上，然后在你想要创建项目的文件终端内输入指令：npm create vue@latest: image.png

  • 在接下来的选择中，我们不需要添加其他插件，直接全选择no： image.png

  • 你创建的项目文件，会自动创建好 image.png

  • 这里是vue项目初始化文件，一个项目基本的文件框架差不多也长这样，只不过这是一个空壳子。 image.png

  • 再根据提示，下载项目所需依赖

    1. cd my-project
    2. npm install
    3. npm run dev

image.png

image.png

  • 访问这个链接，你会看到：

image.png

ok你的Vue项目已经创建好了。

项目结构

这个是项目依赖下载好后的Vue项目目录，

image.png

  • 我们可以看到有一个node_modules文件夹生成，这个文件夹是放项目的本地依赖包的，下面这是主要有public静态资源文件,和scr文件,src文件是未来开发代码的主战场了，所有的Vue组件都放在这个包下。

    image.png

  • 与public和src同级目录下的index.html文件，也很重要，这个 index.html 文件是整个 Vue 应用程序的入口点和最终输出的 HTML 文件。整个项目内只有这一个html文件，可以为最终渲染提供基本的HTML5结构，它包含了加载 Vue.js 运行时库以及任何其他外部 JavaScript 或 CSS 文件的 <script> 和 <link> 标签。

  • 它还提供了一个项目主要挂载点，通常以一个ID为app的div盒子，为主要挂载点，所有的全局样式、字体、图片和其他静态资源通常都在这里引用。像下面这样： image.png

  • 在 Node.js 项目中，package.json 文件是非常重要的，它存储了关于项目的所有元数据，包括依赖项、版本信息、许可证、作者等。其中的 "scripts" 字段允许你定义一些自定义的脚本命令，这些命令可以简化常见的开发任务，比如构建、测试、启动服务、打包、部署等。 image.png

  • 下面就是介绍最后的主角了，src目录，它里面的main.js是项目的单点入口，它被index.html引入，且自身作为所有其他组件的父组件，该文件内创建了一个App的实例应用并挂载到ID为app的挂载点上。

    image.png

  • 我们找到被挂载的App应用：在这里面我们还可以挂载更多其他的子组件，前面的index.html只是提供了html结构，而这些组件，则提供很多元素节点，把他们拼凑到一起就可以组成页面了。

    image.png image.png

  • 在我们修改了App.vue内的代码后，其显示：

image.png

  • 未来在使用vue开发时，都可以创建像components这样的文件夹，放你的各种vue组件： image.png

看到这里，你已经学会如何创建Vue项目，且对项目结构有了清晰的认识，下面可以再看Vue 官方文档 | Vue.js (vuejs.org)，进行下一步深度学习吧！

avatar
文章
阅读
粉丝