提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
小白不太善于前端开发,记录一下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走
根据官网的快速上手步骤,创建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)
启动后页面内容 :
webpack和vite的区别
2.看看本质
一个构建工具
三、记录几个问题
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
四、记录几个方便的plugins
1. unplugin-auto-import
自动按需导入
参考blog
2. unplugin-vue-components
是一款能帮助组件自动导入的库,简单点的说,你不需要使用import xx from ‘xxx.vue’ 这行语句也能实现导入的效果。
但是,小白还是老老实实import吧 不然都搞不清楚状况吧……
参考blog
五、Typescript
总结
从入门到放弃了