如何使用vite搭建vue3项目详解

 更新时间:2022年07月14日 08:46:12   作者:不正经的Hello World  
Vite 是一个面向现代浏览器的更轻,更快的web应用开发工具,下面这篇文章主要给大家介绍了关于如何使用vite搭建vue3项目的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下

使用vite需要node版本在12以上

一:npm构建

1、npm init vite@latest

2、Project name:(项目名称)

3、Select a framework:(选择要用什么构建自己的项目,这边选vue)然后会有两个选项一个是vue(vue+js) ,一个是vue+ts,根据自己的项目需求来选

4、cd到项目下npm install 安装一下依赖

注:以下只针对vue3+ts配置,vue+js请移步

二:更改http://localhost:3000/到8080与Network路由访问

在vite.config.ts里面加入:(server对象为新增,其他均是原有代码)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server:{
    host:'0.0.0.0',//解决vite use--host to expose
    port:8080,
    open:true
  }
})

三:配置vite别名(npm install @types/node --save-dev)

在vite.config.ts里面加入:(resolve对象为新增)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
 
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server:{
    host:'0.0.0.0',//解决vite use--host to expose
    port:8080,
    open:true
  },
  resolve:{
    alias:[
      {
        find:'@',
        replacement:resolve(__dirname,'src')
      }
    ]
  }
})

四 :路由(npm install vue-router@4)

src下新建目录router→index.ts

import {createRouter,createMemoryHistory,RouteRecordRaw} from 'vue-router'
import Layout from '@/components/HelloWorld.vue'
const routes:Array<RouteRecordRaw> =[
    {
        path:'/',
        name:'home',
        component:Layout
    }
]
// 创建
const router = createRouter({
    history:createMemoryHistory(),
    routes
})
// 暴露出去
export default router

在min.ts下 import router from './router/index' 引入路由 

在min.ts下 app.use(router)注册路由

在App.vue下<router-view></router-view>

五:vuex(npm install vuex@next --save)

src下新建目录store→index.ts

打开vuex官网(Vuex 是什么? | Vuex)找到TypeScript支持下的“简化 useStore 用法”直接复制所有代码就可以

import { InjectionKey } from 'vue'
import { createStore, useStore as baseUseStore, Store } from 'vuex'
 
export interface State {
  count: number
}
 
export const key: InjectionKey<Store<State>> = Symbol()
 
export const store = createStore<State>({
  state: {
    count: 0
  },
  mutations:{
    setCount(state:State,i:number){
        state.count = i
    }
  },
  getters:{
     getCount(state:State){
        return state.count
    }
  }
})
 
// 定义自己的 `useStore` 组合式函数
export function useStore () {
  return baseUseStore(key)
}

在min.ts下 import {store,key} from './store/index' 引入vuex

在min.ts下 app.use(store,key)注册路由

(如有疑问可参考官网TypeScript支持下的“useStore 组合式函数类型声明”)

六:Eslint(可选)(npm install --save-dev eslint eslint-plugin-vue)

根目录新建文件.eslintrc.js

module.exports = {
    root: true,
    parserOptions: {
        sourceType: 'module'
    },
    parser: 'vue-eslint-parser',
    extends: ['plugin:vue/vue3-essential', 'plugin:vue/vue3-strongly- recommended', 'plugin:vue/    vue3-recommended'],
    env: {
        browser: true,
        node: true,
        es6: true
    },
    rules: {
        'no-console': 'off',
        'comma-dangle': [2, 'never'] //禁止使用拖尾逗号 } }
    }
}

七:less/sass(可选)(npm install -D sass sass-loader)

总结

到此这篇关于如何使用vite搭建vue3项目的文章就介绍到这了,更多相关vite搭建vue3项目内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue自定义keepalive组件的问题解析

    vue自定义keepalive组件的问题解析

    这篇文章主要介绍了vue自定义keepalive组件的相关资料,keep-alive组件是使用 include exclude这两个属性传入组件名称来确认哪些可以被缓存的,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2022-07-07
  • vue项目及axios请求获取数据方式

    vue项目及axios请求获取数据方式

    这篇文章主要介绍了vue项目及axios请求获取数据方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 教你60行代码实现一个迷你响应式系统vue

    教你60行代码实现一个迷你响应式系统vue

    这篇文章主要为大家介绍了教你60行代码实现一个迷你响应式系统详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪<BR>
    2023-03-03
  • Vue3+TypeScript+printjs实现标签批量打印功能的完整过程

    Vue3+TypeScript+printjs实现标签批量打印功能的完整过程

    最近在做vue项目时使用到了print-js打印,这里给大家分享下,这篇文章主要给大家介绍了关于Vue3+TypeScript+printjs实现标签批量打印功能的完整过程,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • vue报错之exports is not defined问题的解决

    vue报错之exports is not defined问题的解决

    这篇文章主要介绍了vue报错之exports is not defined问题的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07
  • Vue3搭建组件库开发环境的示例详解

    Vue3搭建组件库开发环境的示例详解

    这篇文章给大家分享Vue3搭建组件库开发环境,给大家讲解依次搭建组件库、example、文档、cli,本文内容是搭建组件库的开发环境的过程,感兴趣的朋友跟随小编一起看看吧
    2022-11-11
  • 基于vue.js轮播组件vue-awesome-swiper实现轮播图

    基于vue.js轮播组件vue-awesome-swiper实现轮播图

    一般做移动端轮播图的时候,最常用的就是Swiper插件了,而vue.js也有一个轮播组件vue-awesome-swiper,用法跟swiper相似。接下来通过本文给大家详解讲解vue.js轮播组件vue-awesome-swiper实现轮播图实例代码,需要的朋友参考下
    2017-03-03
  • vue3.0中sass全局的使用过程

    vue3.0中sass全局的使用过程

    这篇文章主要介绍了vue3.0中sass全局的使用过程,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • Vue 技巧之控制父类的 slot

    Vue 技巧之控制父类的 slot

    插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性。
    2020-02-02
  • vue实现鼠标滑动展示tab栏切换

    vue实现鼠标滑动展示tab栏切换

    这篇文章主要为大家详细介绍了vue实现鼠标滑动展示tab栏切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04

最新评论