整站使用Vue

最新推荐文章于 2024-10-05 01:22:45 发布

无语-葬欧

最新推荐文章于 2024-10-05 01:22:45 发布

阅读量710

点赞数 15

分类专栏： vue简易学习文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_71733565/article/details/141610952

版权

vue简易学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

环境准备

介绍：create-vue是Vue官方提供的最新的脚手架工具，用于快速生成一个工程化的Vue项目。

create-vue提供了如下功能：

统一的目录结构
本地调试
热部署
单元测试
集成打包

依赖环境：NodeJS

配置NodeJS

1.去官网安装最新版本即可，本文以18.18.0为例

2. 选择安装目录

选择安装到一个，没有中文，没有空格的目录下（新建一个文件夹NodeJS）

3. 验证NodeJS环境变量

NodeJS 安装完毕后，会自动配置好环境变量，我们验证一下是否安装成功，通过： node -v

4. 配置npm的全局安装路径

使用管理员身份运行命令行，在命令行中，执行如下指令：

npm config set prefix "D:\develop\NodeJS

注意：D:\develop\NodeJS 这个目录是NodeJS的安装目录

（作者已经安装过一次了，成功的显示和下文的更换源一致，不出现任何代码即为安装成功）

5.更换安装包的源

npm config set registry http://registry.npm.taobao.org/

对源进行检查检查

npm config get registry

nmp，以及为什么要更换安装包的源，相信大家一头雾水

npm

Node Package Manager，是NodeJS的软件包管理器。类似于maven，但是npm的默认下载路径为国外，下载慢，因此我们把下载地址改成国内服务器，以http://registry.npm.taobao.org/为例

Vue项目创建和启动

创建一个工程化的Vue项目，在要创建的目录下执行命令：npm init vue@latest

执行上述指令，将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具，第一次会较慢

进入项目目录，执行命令安装当前项目的依赖：npm install（作者已经安装过了，所以找了张图）

可直接在目录下输入“code .”可以直接用Visual Studio Code打开

Vue项目-目录结构

package-lock.json（项目配置文件）会随着package.json修改自动生成，无需修改

构建完之后，在Visual Studio Code下方有运行（若没有右键项目有npm脚本选项）

运行后出现链接

运行链接后为该页面则视为成功

Vue项目开发流程

默认的首页为index.html,根组件为App.vue，入口文件为main.js（和springboot类似，存在启动类）

.vue是Vue项目中的组件文件，在Vue项目中也称为单文件组件（SFC，Single-File Components）。Vue 的单文件组件会将一个组件的逻辑 (JS)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里（*.vue）。

API风格

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

组合式API：

setup：是一个标识，告诉Vue需要进行一些处理，让我们可以更简洁的使用组合式API。

ref()：接收一个内部值，返回一个响应式的ref对象，此对象只有一个指向内部值的属性 value。

onMounted()：在组合式API中的钩子方法，注册一个回调函数，在组件挂载完成后执行。

组合式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：

选项式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灵活多变，让组件拥有了更加良好的代码组织结构，让相同的代码逻辑在不同的组件中进行了完整的复用，因此组合式API更加推荐使用