最后
全网独播-价值千万金融项目前端架构实战
从两道网易面试题-分析JavaScript底层机制
RESTful架构在Nodejs下的最佳实践
一线互联网企业如何初始化项目-做一个自己的vue-cli
思维无价，看我用Nodejs实现MVC
代码优雅的秘诀-用观察者模式深度解耦模块
前端高级实战，如何封装属于自己的JS库
VUE组件库级组件封装-高复用弹窗组件
安装less依赖
npm add -D less
安装scss and sass 依赖
npm add -D sass
安装后可以直接使用less了 ,当然，也可以使用scss,一般只下一个就够了,我比较推荐scss
3、自动导入
这个是我非常非常非常推荐的两个插件,不过用过element、naiveui等的人一般也会知道，尤大推荐
本来放到组件库的,但想了下,可能一些新手看不懂,单独拿出来说下,使用之后,不用导入vue中hook reactive ref
npm install -D unplugin-vue-components unplugin-auto-import
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from "path";
// 自动导入vue中hook reactive ref等
import AutoImport from "unplugin-auto-import/vite"
//自动导入ui-组件 比如说ant-design-vue element-plus等
import Components from 'unplugin-vue-components/vite';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
AutoImport({
//安装两行后你会发现在组件中不用再导入ref，reactive等
imports: ['vue', 'vue-router'],
//存放的位置
dts: "src/auto-import.d.ts",
}),
Components({
// 引入组件的,包括自定义组件
// 存放的位置
dts: "src/components.d.ts",
}),
],
})
4、安装 router
npm
npm install vue-router@4
yarn
yarn add vue-router@4
在src下创建一个 routes 文件夹，再创建一个 index.ts 文件
import { createRouter, createWebHistory } from "vue-router";
let routes= [
{
path: '/',
name: 'home',
//使用import可以路由懒加载，如果不使用，太多组件一起加载会造成白屏
component: () => import('../view/homeView.vue')
},
//{
//配置404页面
//path: '/:catchAll(.*)',
//name: '404',
//component: () => import(''),
//}
]
// 路由
const router = createRouter({
history: createWebHistory(),
routes
})
// 导出
export default router
main.ts文件引入
import { createApp } from 'vue'
import App from './App.vue'
//routes
import router from "./routes/index";
const app= createApp(App)
//routes
app.use(router)
app.mount('#app')
router安装好了，其它(页面)要自己配置,404页面未配置
注意事项：使用路由新人要注意的地方，以下是我的使用习惯（公司只有我一个前端）
1、一般情况，一级路由是框架，二级或三级才是展示内容的，正常情况最多三级路由，
我一般写三级路由时，二级只用来包含三级路由用的，不会写component组件
如图：
1、path属性第一位是否加 / ，第一级路由必须加，后面的子路由我推荐加
如果你有三级路由，只有一级加的 / ，那么要使用 /a/b/c 能访问到c页面
如果一二级加 / ，那么要使用 /b/c 能访问到c页面
如果一二三级都加，那么要直接使用 /c 就能访问到c页面
总结：你最后第几级路由加 / 决定你网页的访问路径，推荐像我上面图片一样，path的
第一位都加 / ,这样访问起来很方便。
当然实际开发情况可能什么情况都有，如果你刚开始学，不懂找路由，使用vue开发工具devtools 查看，也很方便（没有下载的，下面那有教程）
5、安装pinia
因为是vue3+ts，安装pinia更好点，vuex拥抱ts没有pinia好
npm
npm install pinia
yarn
yarn add pinia
main.ts引入
import { createApp } from 'vue'
import App from './App.vue'
//pinia
import { createPinia } from 'pinia'
const pinia = createPinia()
const app = createApp(App)
//pinia
app.use(pinia)
app.mount('#app')
在src下创建一个 store 文件夹，再创建一个 home.ts 文件
其它名也可以，因为pinia它有一个根文件，会把 defineStore 第一个参数当id值，相当于vuex中的 module 自动引入，也会在Vue.js devtools 插件中以第一个参数名展示（下面展示）
**注意：**defineStore第一个参数很重要，而且是唯一值。它的命名在devtools 插件能方便找到这个文件的数据，方便调试
import { defineStore } from 'pinia'
// useMain 可以是 useUser、useCart 之类的名字
// defineStore('main',{..}) 在devtools 就使用 main 这个名
export const useMain = defineStore('main', {
// 相当于data
state: () => {
return {
// 所有这些属性都将自动推断其类型,如果推断失败可以试下 as xxx
counter: 0,
name: 'Eduardo',
}
},
// 相当于计算属性
getters: {
doubleCount: (state) => {
return state.counter * 2
},
},
// 相当于vuex的 mutation + action，可以同时写同步和异步的代码
actions: {
increment() {
this.counter++
},
randomizeCounter() {
setTimeout(() => {
this.counter = Math.round(100 * Math.random())
}, 0);
},
},
})
在要使用pinia的组件
以下使用只是用的比较常用的方法，还有其它方法请查看官网 pinia中文官网
<template>
<div>counter:{{counter}}</div>
<div>doubleCount:{{doubleCount}}</div>
<a-button @click="main.randomizeCounter()">counter(round)</a-button>
<a-button type="primary" @click="main.increment()">counter++</a-button>
<div>{{name}}</div>
<a-button @click="amend()">修改</a-button>
</template>
<script setup lang='ts'>
//引入想要的pinia文件 {} 里面就是对应导出的名字
import { useMain } from '../store/home'
import { storeToRefs } from 'pinia';
const main = useMain()
// 解构main里面的state和getters的数据，
// 使用storeToRefs解构才有响应式，响应式可以直接修改数据，不过这我只用来渲染
let { counter,name ,doubleCount } = storeToRefs(main)
//（常用方法三种）
//常用方法一： 使用数据
console.log( counter );
//使用方法(方法目前不能解构)
main.increment()
// 常用方法二：修改数据
counter = 9999
//常用方法三：
//进阶使用$patch，多个修改
const amend=()=>{
main.$patch((state) => {
state.counter += 10;
state.name = '张三'
})
}
</script>
Vue.js devtools 环境下通过 defineStore 第一个参数当id值找到对应的仓库
vue-devtools插件
如果你没有**vue-devtools，**而又想下载这里有一个教程下载
数据持久化插件
如果你想要数据持久化可以试下这个插件，简单使用
数据持久化插件（旧推荐，无中文）
pinia-数据持久化插件（新推荐，有中文，官网有明确的局限性提示）
6、安装axios
想要方便使用axios，想要封装统一的请求头处理，便于接口的统一管理，以及解决出现回调地狱。
可以通过下面的链接去实现
因为写的比较多了，看起来烦，所以把一起写在别链接上，下面这些都是自己的需求来安装
7、配置@别名
在vite配置@别名，这能在开发时对路径看些来直观点。
8、自定义组件名
vue3.3+版本已经可以自定义组件名了
<script setup lang="ts">
defineOptions({ name: '组件名' })
</script>
3.3版本以下的提示：
在 3.2.34 或以上的版本中，使用
<script setup>的单文件组件会自动根据文件名生成对应的name选项，无需再手动声明。也就是说，除非你想换名，并且又不想写两个script 标签，就可以通过下面的链接去做。
Vue3.3以下 setup 语法糖下如何定义组件名称
vue3获取组件名，自定义缓存组件，自定义清除缓存组件
9、安装element-puls组件库
文末
js前端的重头戏，值得花大部分时间学习。
推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。
学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。
面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。
这是288页的前端面试题
