首页 > 其他分享 >yarn+vite基本配置

yarn+vite基本配置

时间:2023-01-12 14:46:28浏览次数:56  
标签:package 配置 yarn add Yarn 安装 vite

官网指引

  1. 英文官网:Yarn英文官网
  2. 中文文档:Yarn中文文档

Yarn 的优点
快速:Yarn 缓存了每个下载过的包,所以再次使用时无需重复下载。 同时利用并行下载以最大化资源利用率,因此安装速度更快。

可靠:使用详细、简洁的锁文件格式和明确的安装算法,Yarn 能够保证在不同系统上无差异的工作。

安全:在执行代码之前,Yarn 会通过算法校验每个安装包的完整性。

window 系统安装 Yarn

  • 下载安装包安装
    当它运行时会指引你将 Yarn 安装到 Windows 上。需要先安装 Node.js。
npm install -g yarn 

安装成功后查看版本

yarn --version

Yarn 常用命令

  1. 初始化新项目
yarn init
  1. 添加依赖包
yarn add [package] // 会自动安装最新版本,会覆盖指定版本号
yarn add [package] [package] [package] // 一次性添加多个包
yarn add [package]@[version] // 添加指定版本的包
yarn add [package]@[tag] // 安装某个tag(比如beta,next或者latest)
  1. 将依赖项添加到不同依赖项类别

不指定依赖类型默认安装到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
  1. 升级依赖包
yarn upgrade [package] // 升级到最新版本
yarn upgrade [package]@[version] // 升级到指定版本
yarn upgrade [package]@[tag] // 升级到指定tag
  1. 移除依赖包
yarn remove [package] // 移除包
  1. 安装package.json里的包依赖,并将包及它的所有依赖项保存进yarn.lock
yarn 或 yarn install // 安装所有依赖
yarn install --flat // 安装一个包的单一版本
yarn install --force // 强制重新下载所有包
yarn install --production // 只安装生产环境依赖
  1. 发布包
yarn publish
  1. 运行脚本
yarn run // 用来执行在 package.json 中 scripts 属性下定义的脚本
  1. 显示某个包的信息
yarn info [package] // 可以用来查看某个模块的最新版本信息
  1. 缓存
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')

标签:package,配置,yarn,add,Yarn,安装,vite
From: https://www.cnblogs.com/fuqian/p/17046598.html

相关文章

  • tp5.0 配置深入研究
    1.配置格式return[ 'name'=>'', 'age'=>'', ];2、配置的形式1、惯例配置 a、惯例配置目录 C:\AppServ\www\tp5\thinkphp\convention.php b、注意: 大家一......
  • SpringBoot不同环境的配置文件讲解
    前言​ 源于工作中发现项目中的的application.yml有多样的application.yml,如下图所示:​ 了解过后发现是因为测试环境和生产环境一些配置可能会有差异,比如数据库的地址、......
  • IDEA 项目时,导入项目maven都需要重新配置
    问题IEDA每次运行打开新项目都要重新配置maven,而我们希望只配置一次,共用一个maven解决A1.打开默认设置2.配置maven3.重启IDEA,解决解决B1.打开项目前设置......
  • ASP.NET Core 配置 Swagger 显示接口注释描述信息
    添加注释说明给Controller和Action添加注释把注释信息在Swagger中展示这时候需要用到XML文档,因为它是通过XML来维护Swagger文档的一些信息。单击鼠标右键,选择项目......
  • uni-app Pages.json配置
    https://uniapp.dcloud.net.cn/collocation/pages.htmlpages.json 文件用来对uni-app进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等......
  • Java程序员必看之:eclipase中maven的配置
     需要准备:apache-maven-3.2.3.zip包  Repository.rar本地仓库                              ......
  • vite+vue3搭建项目流程
    1.安装Node2.使用npm创建目录npmcreatevite@latest项目名称----templatevue3.配置@路径(path模块是node.js内置的功能,但是node.js本身并不支持ts,所以需要手......
  • Springboot使用JPA配置多数据源
    Springboot使用JPA配置多数据源https://zhuanlan.zhihu.com/p/299055754本人在最近的项目中,需要使用JPA配置两个数据源来完成一些功能,以此记录配置过程。方便以后使用:第......
  • ingress获取客户端真实IP配置记录
    一,背景需要日志展示真实客户端地址二,功能实现步骤1,配置ingress-nginx的configmapcompute-full-forwarded-for:'true'forwarded-for-header:X-Forwarded-For2,修改in......
  • 生成mobileconfig配置文件及签名
    配置描述文件是一个用于安装到设备的XML格式的文件,包含了相关的配置信息。用iPhone配置使用工具生成配置文件打开文件——新建配置文件,主要涉及使用到的配置如下:......