最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
使用vite搭建vue3项目教程
时间:2022-10-12 编辑:坚强 来源:一聚教程网
本文为小伙伴们介绍了关于使用vite搭建vue3项目教程,感兴趣的小伙伴一起来看看吧。
一: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=[ { 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下
五:vuex(npm install vuex@next --save)
src下新建目录store→index.ts
打开vuex官网,找到TypeScript支持下的“简化 useStore 用法”直接复制所有代码就可以
import { InjectionKey } from 'vue' import { createStore, useStore as baseUseStore, Store } from 'vuex' export interface State { count: number } export const key: InjectionKey> = Symbol() export const store = createStore ({ 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项目教程的全部内容了,感兴趣的小伙伴记得点击关注哦。
-
上一个: js实现新闻轮播效果教程
相关文章
- Vue设置全局的cookie对象教程 10-26
- vue中将el-switch值true、false改为number类型的1和0解析 10-24
- Vue中的路由配置项meta使用解读 10-24
- Vue动态组件表格的实现解析 10-18
- vue parseHTML函数解析器遇到结束标签代码展示 10-12
- vue实现列表无缝循环滚动 10-12