yarn+vite基本配置

1 篇文章 0 订阅

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 开发工具,它具有以下特点:

  1. 快速的冷启动
  2. 即时的模块热更新
  3. 真正的按需编译

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')

注:此乃黄敢敢夜观各大网站视频所学即得笔记,如有雷同,请联系我进行删除!阿里嘎多
又注:还没写完笔记哟,同步更新

  • 4
    点赞
  • 21
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
在Vue3 + Vite项目中,您可以使用Vue Router进行路由配置。以下是在Vue3 + Vite项目中使用Vue Router进行路由配置的步骤: 1. 安装Vue Router 在项目中使用npm或yarn安装Vue Router: ``` npm install vue-router@4 ``` 或 ``` yarn add vue-router@4 ``` 2. 创建路由 在项目中创建一个路由文件,例如`router.js`。在该文件中,您可以创建路由并导出它们。以下是一个简单的示例: ``` import { createRouter, createWebHistory } from 'vue-router' import Home from './views/Home.vue' import About from './views/About.vue' const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About } ] const router = createRouter({ history: createWebHistory(), routes }) export default router ``` 在上面的示例中,我们创建了两个路由:Home和About。每个路由都包含一个路径、名称和组件。您可以根据自己的需求添加或删除路由。 3. 在应用程序中使用路由 在您的应用程序中,您需要将路由器实例导入并将其添加到Vue实例中。以下是一个简单的示例: ``` import { createApp } from 'vue' import App from './App.vue' import router from './router' const app = createApp(App) app.use(router) app.mount('#app') ``` 在上面的示例中,我们将路由器实例作为插件添加到Vue实例中,并将其挂载到应用程序的根元素(`#app`)上。 4. 创建路由链接 在您的应用程序中,您可以使用`router-link`组件创建路由链接。以下是一个简单的示例: ``` <template> <nav> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> </nav> </template> ``` 在上面的示例中,我们使用`router-link`组件创建了两个路由链接。每个链接都包含一个`to`属性,该属性指定链接的目标路由。 通过这些步骤,您可以在Vue3 + Vite项目中成功配置路由。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值