一个基于vue3+ts+vite项目搭建初探

目录
  • 前言
  • 环境准备
  • 使用Vite快捷搭建
    • 使用npm
    • 使用yarn
    • 安装依赖
    • 启动项目
  • 修改vite配置文件
    • 找到根目录vite.config.ts文件打开
  • 集成路由
  • 集成Vuex
  • 添加element ui
  • 集成axios
  • 集成Sass
  • Vue3 使用
  • 总结

前言

基于Vue3已经成为默认版本,目前的项目暂时还没有使用过vue3开发和最近有一个全新的新项目的基础下,使用vue3开发项目,必然是未来的一个趋势

下面记录一下怎么使用Vue3 + ts + vite 从0开始搭建一个项目

环境准备

Nodejs 版本>=12  使用node -v 查看 node版本

或者将Nodejs升级到最新的稳定版本 npm install -g n  sudo n stable

使用Vite快捷搭建

使用npm

npm init @vitejs/app

使用yarn

yarn create @vitejs/app

按照提示完成项目初始化即可

初始化项目以后可以看到项目的结构如上图

安装依赖

npm install 或者 yarn install

启动项目

npm run dev 或者 yarn dev

修改vite配置文件

找到根目录vite.config.ts文件打开

  • 添加别名,配置@指向src

     import { defineConfig } from 'vite';
     import vue from '@vitejs/plugin-vue';
     import { resolve } from "path";
     const pathResolve = (dir: string) => resolve(__dirname, dir);
    
     export default defineConfig({
        plugins:[
          vue()
        ],
        resolve: {
          alias: {
            "@": pathResolve("./src"),   // 别名
          }
        }
     })
  • 按需导入element ui

    首先需要安装unplugin-vue-componentsunplugin-auto-import这两款插件

    npm install -D unplugin-vue-components unplugin-auto-import

    然后在vite.config.ts中添加以下配置

      import AutoImport from 'unplugin-auto-import/vite';
      import Components from 'unplugin-vue-components/vite';
      import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
    
      export default defineConfig({
        plugins:[
          AutoImport({
            resolvers: [ElementPlusResolver()]
          }),
          Components({
            resolvers: [ElementPlusResolver()]
          })
        ]
      })
  • 打包配置
    export default defineConfig({
        build: {
          target: 'es2015',  //主要用于兼容低版本浏览器 可以解决chrome65版本打包发布到服务器上页面空白的问题(主要是65版本不兼容 try catch )
          cssTarget:'chrome65', // 兼容低版本浏览器上样式问题
          assetsDir: './assets',  // 打包配置路径
          rollupOptions: {
            input: {    // 主要用于配置多页面
              platForm: resolve(__dirname, 'platform.html'),
              merchant: resolve(__dirname, 'merchant.html')
            }
          }
        }
    })

集成路由

  • 安装vue-router

    npm i vue-router@4
  • 在src目录下面添加router文件夹 然后在文件夹下添加index.ts文件
    import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
    
    const routes: Array<RouteRecordRaw> = [
      {
        path: '/home',
        name: 'Home',
        component: () => import('@/views/home.vue')
      },
      { path: '/', redirect: { name: 'Home' } }
    ]
    
    const router = createRouter({
      history: createWebHashHistory(),
      routes
    })
    
    export default router

    当然在配置路由的时候也可以提取侧边栏组件作为公共的组件,配置方法跟vue2 集成路由方法一致,添加children属性

  • 在main.ts中挂载
    import { createApp } from 'vue'
    import App from '@/App.vue'
    import router from '@/router/index'
    
    const app = createApp(App)
    
    app.use(router).mount('#app')

集成Vuex

  • 安装 vuex@next

    npm i vuex@next
  • 在src文件夹下面添加store文件夹,然后在文件夹下面添加index.ts 文件
    import { createStore } from "vuex"
    
    export default createStore({
    	state:{
               count:0
    	},
    	mutations:{
                setCount(state,count){
                    state.count = count
                }
    	},
    	actions:{
                getCount({ commit }){
                    commit('setCount',xxx)
                }
    	}
    })
  • 在main.ts 中挂载
    import { createApp } from 'vue'
    import App from '@/App.vue'
    import router from '@/router/index'
    import store from '@/store/index'
    
    const app = createApp(App)
    
    app.use(router).use(store).mount('#app')

添加element ui

上面讲解vite 配置文件的时候已经提到怎么按需引入element了

现在只需要在main.ts文件中挂载element 即可

因为element plus 默认是英语 所以如果在项目中需要使用的是中文的话,可参加以下配置

在 main.ts 文件中添加

import { createApp } from 'vue'
import App from '@/App.vue'
import ElementPlus from "element-plus"

import zhCn from 'element-plus/es/locale/lang/zh-cn';
import router from '@/router/index'
import store from '@/store/index'

const app = createApp(App)

app.use(ElementPlus,{locale:zhCn})

app.use(router).use(store).mount('#app')

还有一点需要注意的是,如果您使用 unplugin-element-plus 并且只使用组件 API,您需要手动导入样式

如果系统中会经常用到ElMessage、ElMessageBox 等api,可以main.ts 文件中添加以下样式,不然会导致样式问题

import 'element-plus/es/components/message/style/css'
import 'element-plus/es/components/message-box/style/css'

集成axios

  • 安装axios

    npm i axios
  • 添加全局的请求工具 在src下新建一个utils文件夹,文件夹下面添加一个http.ts文件
    import Axios from "axios"
    import { ElMessage } from "element-plus"
    
    const BASE_URL = ''; //请求接口url 如果不配置 则默认访问链接地址
    const TIME_OUT = ''; // 接口超时时间
    const instance = Axios.create({
    	baseURL:BASE_URL,
    	TIME_OUT:TIME_OUT
    })
    
    // 可以添加一个axios的全局配置
    instance.defaults.headers.post = {
    		"Content-Type":'application/x-www-form-urlencoded'
    }
    
    // 添加请求拦截器
    instance.interceptors.request.use((config) => {
            // 可以在此处添加一些共有的请求拦截
            ...
    	return config
    },(error) => {
    	return Promise.reject(error);
    })
    
    // 添加响应拦截器
    instance.interceptors.response.use((response)=>{
    	const res = response.data;
    	// 在此处添加一些响应拦截
    	 ...
    },(error)=>{
    	return Promise.reject(error);
    })
    
    export default instance;
  • 使用axios 在src下新建一个API的文件夹,在文件夹下添加user.ts 文件
    import $http from '@/utils/http';
    
    // 添加用户登录请求 data如果约定好可以添加ts 接口类型
    export const userLogin = (data:any) => {
    	return $http({
                   url:'xxx',
                   method:'post',
                   data
    	})
    }

    在需要使用这个接口的页面进行引入即可 例如在login.vue中

    <script lang="ts">
    	import { userLogin } from "@/api/user"
    </script> 

集成Sass

  • 安装sass

    npm i sass -D
  • 使用 在.vue 文件中
    <style lang="scss">
    	...  // 此处可以用sass语法编写
    </style>

Vue3 使用

在vue3中去除了filters用法,如果需要用到,可以自行实现

  • 生命周期函数

    <script lang="ts">
    	 import {
    	 	onMounted,
    	 	defineComponent
    	 } from "vue";
    
    	 export default defineComponent({
    	 	setup(){
                    // 添加一个方法
                        const getList = () => {
                            ...
                        }
                        onMounted(getList)
    
                        return {
                            getList  // 如果在template中使用到这个方法,需要返回
                        }
                 }
    	 })
    </script>
  • 响应式数据

    在vue3中可以通过ref 和 reactive来创建一个响应式数据,如下:

    通常使用 ref 来将一个原始数据类型转换成带有响应式特性的数据类型(也可以用来初始化对象类型)

    通常使用reactive来赋予对象响应性特性

    <template>
    	<div>
            <p> hello,{{ name }} </p>
            <el-button @click='handleClick'></el-button>
    	</div>
    </template>
    <script lang='ts'>
    	import { ref , reactive,defineComponent} from "vue";
    
    	const name = ref(''); // 初始化name为一个空的字符串
    
    	const handleClick = () => {
    		name.value = 'lemon' // 需要注意的是修改值时,不适用this
    	}
    	export default defineComponent({
                 setup(){
                //
                    return {
                        name  // 返回name
                    }
                 }
    	 })
    </script>

    用ref创建响应式数据时 不需要使用this ,但是要使用name.value 表示数据的值

  • 初始化数据

    在vue2中可以使用options 来初始化数据,vue3没有这个属性

    // 首先可以定义一个方法 返回初始化数据
    const formData = () => {
    	return {
                userName:'',
                password:''
    	}
    }
    
    // 初始化页面展示数据
    const form = reactive(formData())
    
    // 重置数据为初始化状态
    Object.assign(form,formData())
  • 路由使用
    // vue 中有以下两个方法
    import { useRoute, useRouter} from "vue";
    
    const route = userRoute(); // route 表示的是当前路由
    
    export default defineComponent({
    	 setup(){
    
                    const router = useRouter() // 用于路由跳转
    
                    return {}
    	 }
    })

    useRouter() 一定要放在setup方法里面最上方位置 不然数值为undefined

  • 引入组件

    引入组件的方式跟vue2 一致

    import layout from "@/layout/index"
    
    export default defineComponent({
    	components:{
    		layout
    	}
    })
  • 使用vuex

    vue3 提供了 useStore 方法

    import { useStore } from "vue";
    
    export default defineComponent({
    	 setup(){
                    const store = useStore() // 
    
                    return {}
    	 }
    })
  • computed 和 props用法

    vue3 提供了computed方法

     // 基本用法
    import { computed } from 'vue';
    export default defineComponent({
    	setup(){
    	   //
            const name = computed({
                  return XXX;
            })

            return {
    		name
            }
        }
   })
computed 还可用于使用一个v-model 双向数据绑定的功能(例如: 页面弹框显示与关闭)

需要跟props , emit 一起使用
    import { computed } from 'vue';
    export default defineComponent({
    	props:{
            modelValue:{
    		type:Boolean,
    		default:false
            }
    	}
    	emits: ['update:modelValue'],
    	setup(props,{ emit }){
    			//
    		const dialogVisible = computed({
                    get:() => props.modelValue, // setup 函数第一个参数是props
                    set:(newVal) => {
    			emit("update:modelValue",newVal)
                    }
    		})

    		return {
                    dialogVisible
    		}
    	}
    })

在其他地方引用该组件的使用 v-model 即可

  • watch 监听使用

    vue3 提供了 watch 方法

    import { watch, ref } from "vue"
    
    const name = ref('')
    export default defineComponent({
    
    	setup(props){
    
                // name 处也可以添加一个方法 () => props.name
                watch(name,()=>{
                    // 可添加异步请求
                })
    	}
    })

总结

基于以上,一个基于Vue3 + element + vite 的基本后台管理系统,大致是可以成型的,另外还有一些比如配置eslint 代码规范, 可以自己自行添加,还有vue3 其他一些进阶的用法,会用其他的文章来进行讲述。

希望以上的内容 ,对于没有接触过vue3 开发的人会有所帮助

到此这篇关于一个基于vue3+ts+vite项目搭建的文章就介绍到这了,更多相关vue3+ts+vite项目搭建内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 使用Vue3和Echarts 5绘制带有立体感流线中国地图(推荐收藏!)

    目录 本文绘制的地图效果图如下: 一.Echarts 使用五部曲 1.下载并引入 echarts 2.准备容器 3.实例化 echarts 对象 4.指定配置项和数据 5.给 echarts 对象设置配置项 二.开始绘制流线中国地图 第一步:先绘制一个中国地图 第二步:添加流线 第三步:添加立体投影 总结 本文绘制的地图效果图如下: 一.Echarts 使用五部曲 1.下载并引入 echarts Echarts 已更新到了 5.0 版本,安装完记得检查下自己的版本是否是 5.0 . npm in

  • Vue3项目中引用TS语法的实例讲解

    目录 基础语法 vue-router vuex##### elementPlus axios setup script 基础语法 定义data  //script标签上 **lang="ts"** <script lang="ts"> import { defineComponent, reactive, ref, toRefs } from 'vue'; //定义一个类型type或者接口interface来约束data type Todo = {  

  • 从零搭建一个vite+vue3+ts规范基础项目(搭建过程问题小结)

    目录 项目初始化 安装router和pinia 安装ESlint eslint的vue规则需要切换 安装prettier 安装stylelint 安装husky 安装commitlint 总结 参考: 最近时间总算是闲了下来,准备着手搭建一个基础模板,为后面新项目准备的,搭建过程中遇到不少问题,现在总结下来给大家使用. 项目初始化 本项目已vite开始,所以按照vite官方的命令开始.这里使用的命令行的方式来搭建基础项目: yarn create vite my-vue-app --templa

  • vue3中如何使用ts

    目录 如何使用ts app.vue header.vue list.vue listitem.vue footer.vue 如何使用ts 在创建vue脚手架的时候吧typescript选上 app.vue <template>   <!-- <div id="nav">     <router-link to="/">Home</router-link> |     <router-link to=&quo

  • vite创建一个标准vue3+ts+pinia项目

    目录 [01]使用的 Yarn创建项目: [02]在项目中使用pinia [03]添加vue-router [04] 安装按需自动导入插件 [05] 添加element-plus组件库 [06]添加sass [07] 安裝prettier 和 eslint 1.安装依赖项 使用vite创建一个标准vue3+ts+pinia项目的实现示例 [01]使用的 Yarn创建项目: 1.执行命令 yarn create vite my-vue-app --template vue-ts 3.cd my-v

  • 使用vue3+TS实现简易组件库的全过程

    目录 前置 组件编写 dropdown form 验证 总结 前置 首先下载vue-cli,搭建我们的环境,vue-create-luckyUi,选择vue3和TypeScript .在src目录下创建package作为组件目录.再安装bootstrap,用bootstrap里面的样式来完成我们的组件. 组件编写 dropdown 首先查看boorstrap文档,是这样用的 <div class="dropdown"> <button class="btn

  • 一个基于vue3+ts+vite项目搭建初探

    目录 前言 环境准备 使用Vite快捷搭建 使用npm 使用yarn 安装依赖 启动项目 修改vite配置文件 找到根目录vite.config.ts文件打开 集成路由 集成Vuex 添加element ui 集成axios 集成Sass Vue3 使用 总结 前言 基于Vue3已经成为默认版本,目前的项目暂时还没有使用过vue3开发和最近有一个全新的新项目的基础下,使用vue3开发项目,必然是未来的一个趋势 下面记录一下怎么使用Vue3 + ts + vite 从0开始搭建一个项目 环境准备

  • Vue3+TS+Vite+NaiveUI搭建一个项目骨架实现

    目录 写在前面 创建Vue3项目 开发规范 Vite配置 别名配置 环境变量 .env文件 定义环境变量 在vite.config.ts中获取环境变量 自动导入 NaiveUI的安装 写在最后 写在前面 现在已经有很多项目团队使用Vue3+TS进行开发,同时也就意味着Vue3的生态越来越完善,如果还是停留在Vue2的阶段已经out了,这篇文章将会使用Vue3+TS+NaivaUI搭建一个简单的项目骨架. 创建Vue3项目 首先我们通过Vite来创建一个Vue3+TS的一个项目,打开终端,找到我们

  • Vue3+script setup+ts+Vite+Volar搭建项目

    目录 使用 Vite 创建 vue + ts 项目 Vue 3 的三种语法 Option API Composition API script setup(Composition API 的语法糖) 安装 Volar 结尾 好久没有写了,最近看到Vue3.2 发布了,害,又要开始卷了么. 其实我自己本身还没有使用过Vue3 做过实际的项目开发,然鹅又出新东西了--, 新时代农民工真的是左手工作,右手游戏,还要用jio去学习呢. 什么? 你说谈对象? xswl,我特么一个农民工也配谈对象? 不卷不

  • vue3+ts+vite2项目实战踩坑记录

    目录 1.Vite创建vue3项目 2.配置别名alias 3.引入element-plus 4.glob全局导入 5.静态资源导入 总结: 1.Vite创建vue3项目 使用 NPM: npm init @vitejs/app 使用 Yarn: yarn create @vitejs/app 一个命令快速安装vite+ts+vue3项目: npm init @vitejs/app vite-app --template vue-ts 默认构建好的目录结构是不包含router和vuex的需要手动

  • 基于 Vue 的 Electron 项目搭建过程图文详解

    Electron 应用技术体系推荐 目录结构 demo(项目名称) ├─ .electron-vue(webpack配置文件) │ └─ build.js(生产环境构建代码) | └─ dev-client.js(热加载相关) │ └─ dev-runner.js(开发环境启动入口) │ └─ webpack.main.config.js(主进程配置文件) │ └─ webpack.renderer.config.js(渲染进程配置文件) │ └─ webpack.web.config.js ├

  • 详解如何在Vue3+TS的项目中使用NProgress进度条

    目录 写在前面 在项目中安装 简单的封装 在Vue切换路由时展示进度条 写在前面 NProgress是一个轻量级的进度条组件,在Github上已经2.4万star数了,虽然这个组件已经好久没有更新了,最近一次更新是20年4月份,改了jQuery的版本,但是该组件的使用频率还是高的. 在项目中安装 这里的包管理工具使用的npm,如果你使用的是yarn或者pnpm,请自行更改安装命令,安装命令如下: npm i nprogress -S 因为我们是TS的项目,还需要安装其类型声明文件,命令如下: n

  • 使用Vite搭建vue3+TS项目的实现步骤

    目录 vite简介 初始化项目 修改vite.config.ts 安装ts依赖和ESLint 安装Axios 配置跨域 安装Less vite简介 vite 是一个基于 Vue3 单文件组件的非打包开发服务器,它具有快速的冷启动,不需要等待打包操作:并且官网说是下一代的前端构建工具. 初始化项目 npm init vite@latest 1.输入项目名称 2.选择Vue 3.选择TS 4.启动项目 5.项目启动成功 注意 用vscode进行开发的时候,推荐使用volar,禁用以前vue2常使用的

  • vue3.0 项目搭建和使用流程

    最近在重构一个老项目,领导要求使用新的技术栈.好吧,是时候秀一波我新学的vue3.0了. 不多bb,开始我的表演...(以下只是我自己个人的理解和使用习惯,仅供参考哦) 一:项目搭建 1. 可以自己配置vite,但是为了节省时间,我就使用脚手架直接搭建.(有兴趣可以研究一下vite,还是很香的) 2. 项目生成:iTerm下: vue create myproject 之后根据自己的要求选择不同的配置 选择我们需要的3.x 之后按照要求配置一下router,已经pack.json ... 然后n

  • vue3.0 项目搭建和使用流程

    目录 一:项目搭建 二: 目录结构 三: Composition Api 四: 基本使用: 最近在重构一个老项目,领导要求使用新的技术栈.好吧,是时候秀一波我新学的vue3.0了. 不多bb,开始我的表演...(以下只是我自己个人的理解和使用习惯,仅供参考哦) 一:项目搭建 1. 可以自己配置vite,但是为了节省时间,我就使用脚手架直接搭建.(有兴趣可以研究一下vite,还是很香的) 2. 项目生成:iTerm下: vue create myproject 之后根据自己的要求选择不同的配置 选

随机推荐