vue+vite学习记录(一)

最新推荐文章于 2024-04-26 17:37:33 发布

Noxi_lumors

最新推荐文章于 2024-04-26 17:37:33 发布

阅读量195

点赞数

分类专栏： vue 文章标签： vue.js 学习

本文链接：https://blog.csdn.net/Noxi_lumors/article/details/129840851

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

小白不太善于前端开发，记录一下vue的学习过程。

〇、基础知识

1. javascript

详细内容请移步：重新介绍javascript

import

静态的 import 语句用于导入由另一个模块导出的绑定。无论是否声明了 strict mode，导入的模块都运行在严格模式下。在浏览器中，import 语句只能在声明了 type=“module” 的 script 的标签中使用。
此外，还有一个类似函数的动态 import()，它不需要依赖 type=“module” 的 script 标签。

export

在创建 JavaScript 模块时，export 语句用于从模块中导出实时绑定的函数、对象或原始值，以便其他程序可以通过 import 语句使用它们。被导出的绑定值依然可以在本地进行修改。在使用 import 进行导入时，这些绑定值只能被导入模块所读取，但在 export 导出模块中对这些绑定值进行修改，所修改的值也会实时地更新。

2. node.js

JavaScript 运行时环境，允许开发人员在浏览器之外编写命令行工具和服务器端脚本. 下载地址

3. npm

NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：

允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

4. webpack

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。

一、Vue

“读音view, 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。”

1. 跟着guide走

vue中文文档

根据官网的快速上手步骤，创建testvue项目，可以注意到官网用的是create-vue这样一个脚手架。vue2的时候用到的工具叫vue-cli。区别是：Vue CLI is based on webpack, while create-vue is based on Vite.

或者执行如下命令

npm create vue@3

步骤中添加 vue-router ，启动后页面内容:
在这里插入图片描述

2. 项目目录

请阅读大佬blog 。以下为小白笔记可跳过。
testvue项目目录内容：
项目内容

i. 关键文件

package.json

{
  "name": "testvue",
  "version": "0.0.0",
  "private": true,
   // npm 命令
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
   // 生产依赖
  "dependencies": {
    "vue": "^3.2.47",
    "vue-router": "^4.1.6"
  },
   // 开发额外依赖
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.0.0",
    "vite": "^4.1.4"
  }
}

其中 dependencies 和 devDependencies 区别，可以看这篇blog：

dependencies 指定了项目运行所依赖的模块
devDependencies 指定项目开发阶段额外所需要的模块

vite.config.js

当以命令行方式运行vite时，vite会自动解析该文件：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

因此，通过编写vite.config.js，可以以不同的命令和对应的方式启动项目例如

src/App.vue

根组件 App.vue

<script setup>
// 引入 vue-router 变量
import { RouterLink, RouterView } from 'vue-router'
// 引入组件
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
    
    <div class="wrapper">
      <!-- 使用组件 -->
      <HelloWorld msg="You did it!" />

      <nav>
        <!-- vue-router 变量 用来渲染一个链接的组件，该链接在被点击时会触发导航。 -->
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>
  <!-- vue-router 变量 用于显示用户当前所处路由的组件。 -->
  <RouterView />
</template>

<style scoped>
// 省略...
</style>

src/main.js

默认为整个项目的入口文件

import { createApp } from 'vue'
//从一个单文件组件中导入根组件
import App from './App.vue'
import router from './router'

import './assets/main.css'

const app = createApp(App)

app.use(router)

app.mount('#app')

src/router/index.js

// https://router.vuejs.org/zh/api/#Functions-createRouter
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router

ii. node-module 内容

即依赖的包，具体功能待补充。

@babel # JavaScript 编译器
@esbuild # JavaScript 打包器 , 英文官网
@vitejs
@vue
csstype
esbuild
estree-walker
function-bind
has
is-core-module
magic-string
nanoid
path-parse
picocolors
postcss
resolve
rollup #模块打包工具
source-map #调试编译后的代码
source-map-js
sourcemap-codec
suports-preserve-symlinks-flag
vite
vue
vue-router #官方路由
.package-lock.json

遗留问题： @esbuild 和 esbuild的区别，@vue和vue的区别？

二、vite

1.先用一下看看

按照vite官网里的搭建步骤，创建一个vite+vue项目 (项目名称testvite)
使用vite创建一个vite+vue项目
启动后页面内容：
在这里插入图片描述
webpack和vite的区别

2.看看本质

vite官网

一个构建工具

三、记录几个问题

1. @

在vite.config.js文件中定义了该字符所指。

2. import.meta.url

import.meta.url 是一个 ESM 的原生功能，会暴露当前模块的 URL。将它与原生的 URL 构造器组合使用，在一个 JavaScript 模块中，通过相对路径我们就能得到一个被完整解析的静态资源 URL:

const imgUrl = new URL('./img.png', import.meta.url).href

document.getElementById('hero-img').src = imgUrl

2. axios 用法

3. 引入element-plus

参考： https://zhuanlan.zhihu.com/p/574985670

进入项目目录，终端里运行：

npm install -D unplugin-auto-import unplugin-vue-components

vite.config.js

import { fileURLToPath, URL } from 'node:url'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

main.js

// ... 省略引入vue和App.vue部分
import ELementPlus from 'element-plus'
const app = createApp(App)
app.use(ELementPlus)

package.json

{
  ... // 省略script等部分
  "dependencies": {
    "axios":"1.3.5",
    "element-plus": "^2.3.2",
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "unplugin-auto-import": "^0.15.2",
    "unplugin-vue-components": "^0.24.1",
    "vite": "^4.2.0"
  }
}

4. router 用法

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (About.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import('../views/AboutView.vue')
    }
  ]
})

export default router