yarn+vite基本配置
yarn
官网指引
英文官网：Yarn英文官网
中文文档：Yarn中文文档
Yarn 的优点
快速：Yarn 缓存了每个下载过的包，所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率，因此安装速度更快。
可靠：使用详细、简洁的锁文件格式和明确的安装算法，Yarn 能够保证在不同系统上无差异的工作。
安全：在执行代码之前，Yarn 会通过算法校验每个安装包的完整性。
window 系统安装 Yarn
下载安装包安装
点我下载Yarn安装包，你将下载到一个 .msi 文件，当它运行时会指引你将 Yarn 安装到 Windows 上。如果你使用此安装程序，需要先安装 Node.js。
安装成功后查看版本
yarn --version
Yarn 常用命令
【1】初始化新项目
yarn init
【2】添加依赖包
yarn add [package] // 会自动安装最新版本，会覆盖指定版本号
yarn add [package] [package] [package] // 一次性添加多个包
yarn add [package]@[version] // 添加指定版本的包
yarn add [package]@[tag] // 安装某个tag（比如beta,next或者latest）
【3】将依赖项添加到不同依赖项类别
不指定依赖类型默认安装到dependencies里，你也可以指定依赖类型分别添加到 devDependencies、peerDependencies 和 optionalDependencies
yarn add [package] --dev 或 yarn add [package] -D // 加到 devDependencies
yarn add [package] --peer 或 yarn add [package] -P // 加到 peerDependencies
yarn add [package] --optional 或 yarn add [package] -O // 加到 optionalDependencies
【4】升级依赖包
yarn upgrade [package] // 升级到最新版本
yarn upgrade [package]@[version] // 升级到指定版本
yarn upgrade [package]@[tag] // 升级到指定tag
【5】移除依赖包
yarn remove [package] // 移除包
【6】安装package.json里的包依赖，并将包及它的所有依赖项保存进yarn.lock
yarn 或 yarn install // 安装所有依赖
yarn install --flat // 安装一个包的单一版本
yarn install --force // 强制重新下载所有包
yarn install --production // 只安装生产环境依赖
【7】发布包
yarn publish
【8】运行脚本
yarn run // 用来执行在 package.json 中 scripts 属性下定义的脚本
【9】显示某个包的信息
yarn info [package] // 可以用来查看某个模块的最新版本信息
【10】缓存
yarn cache
yarn cache list // 列出已缓存的每个包
yarn cache dir // 返回全局缓存位置
yarn cache clean // 清除缓存
Vite
vite —— 一个由 vue 作者尤雨溪开发的 web 开发工具，它具有以下特点：
- 快速的冷启动
- 即时的模块热更新
- 真正的按需编译
vite 的使用方式
同常见的开发工具一样，vite 提供了用 npm 或者 yarn 一建生成项目结构的方式，使用 yarn 在终端执行
创建项目
全局安装vite：
npm install create-vite-app -g
创建项目：
yarn create vite-app <project-name>
进入目录：
cd <project-name>
下载依赖：
yarn
运行项目：
yarn dev
即可初始化一个 vite 项目（默认应用模板为 vue3.x），生成的项目结构十分简洁
|____node_modules
|____App.vue // 应用入口
|____index.html // 页面入口
|____vite.config.js // 配置文件
|____package.json
执行 yarn dev 即可启动应用
安装路由
npm install vue-router@next -S
安装路由，并且配置路由文件
history: createWebHashHistory() hash 模式
history:createWebHistory() 正常模式
src/router/index.js
import { createRouter,createWebHashHistory } from 'vue-router'
const router = createRouter({
history:createWebHashHistory(),
routes:[
{
path:'/Home',
name:'name',
component:()=>import('../pages/Home.vue')
}
],
})
export default router
安装vuex
npm install vuex@next -S
配置文件(src/store/index.js)
import { createStore } from 'vuex'
export default createStore({
state:{
test:{
a:1
}
},
mutations:{
setTestA(state,value){
state.test.a = value
}
},
actions:{
},
modules:{
}
})
安装sass
npm install sass -D
配置文件
main.js
src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './index.css'
createApp(App).
use(router).
use(store).
mount('#app')
注：此乃黄敢敢夜观各大网站视频所学即得笔记，如有雷同，请联系我进行删除！阿里嘎多
又注：还没写完笔记哟，同步更新