首页 前端知识 vite vue3 ts 手把手教你创建一个vue3项目

vite vue3 ts 手把手教你创建一个vue3项目

2024-02-14 09:02:12 前端知识 前端哥 615 784 我要收藏

使用vite 创建一个vue3项目,基本全程cv。

安装router,less / scss,pinia,axios, element / Ant Design Vue,Echarts 以及如何配置@别名,自定义组件,vue-devtools插件。

目录

1、创建vue3项目

2、安装less/scss

安装less依赖

        安装scss  and  sass 依赖

3、自动导入

4、安装 router

5、安装pinia

vue-devtools插件

数据持久化插件

6、安装axios

7、配置@别名

8、自定义组件名

9、安装element-puls组件库

10、安装 Ant Design Vue 组件库

11、安装与使用Echarts


1、创建vue3项目

npm

npm create vite@latest 

yarn

 yarn create vite

 输入项目的名字(作者就用test了)

Project name: » vite-project

 按上下选择框架,这就选vue然后回车

√ Project name: ... test
? Select a framework: » - Use arrow-keys. Return to submit.
    Vanilla
>   Vue
    React
    Preact
    Lit
    Svelte

 选择ts,

? Select a variant: » - Use arrow-keys. Return to submit.
    JavaScript
>   TypeScript
    Customize with create-vue
    Nuxt

然后控制台出现后面这三条命令,cv就行

Done. Now run:
  cd test
  npm install
  npm run dev

2、安装less/scss

由于是使用vite,vite它提供了对 .scss.sass.less.styl 和 .stylus 文件的内置支持,但必须安装相应的预处理器依赖;

国内一般只使用 less 或 scss,所以我只写这两个安装

安装less依赖

 npm add -D less 

安装scss  and  sass 依赖

 npm add -D sass 
安装后可以直接使用less了  ,当然,也可以使用scss,一般只下一个就够了,我比较推荐scss

3、自动导入

这个是我非常非常非常推荐的两个插件,不过用过element、naiveui等的人一般也会知道,尤大推荐

本来放到组件库的,但想了下,可能一些新手看不懂,单独拿出来说下,使用之后,不用导入vue中hook reactive ref

npm install -D unplugin-vue-components unplugin-auto-import
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from "path";
// 自动导入vue中hook reactive ref等
import AutoImport from "unplugin-auto-import/vite"
//自动导入ui-组件 比如说ant-design-vue  element-plus等
import Components from 'unplugin-vue-components/vite';

// https://vitejs.dev/config/
export default defineConfig({
	plugins: [
		vue(),
		AutoImport({
			//安装两行后你会发现在组件中不用再导入ref,reactive等
			imports: ['vue', 'vue-router'],
            //存放的位置
			dts: "src/auto-import.d.ts",
		}),
		Components({
			// 引入组件的,包括自定义组件
            // 存放的位置
            dts: "src/components.d.ts",
		}),
	],

})

4、安装 router

npm

 npm install vue-router@4 

yarn

 yarn add vue-router@4 

在src下创建一个 routes 文件夹,再创建一个 index.ts 文件   

 import { createRouter, createWebHistory } from "vue-router";


let routes= [
    {
        path: '/',
        name: 'home',
        //使用import可以路由懒加载,如果不使用,太多组件一起加载会造成白屏
        component: () => import('../view/homeView.vue')
    },
    //{
        //配置404页面
        //path: '/:catchAll(.*)',
        //name: '404',
        //component: () => import(''),
    //}
]
// 路由
const router = createRouter({
    history: createWebHistory(),
    routes
})
// 导出
export default router 

main.ts文件引入

import { createApp } from 'vue'
import App from './App.vue'

 //routes
 import router from "./routes/index"; 

const app= createApp(App)

 //routes 
 app.use(router)  
app.mount('#app')

router安装好了,其它(页面)要自己配置,404页面未配置

注意事项:使用路由新人要注意的地方,以下是我的使用习惯(公司只有我一个前端)

1、一般情况,一级路由是框架,二级或三级才是展示内容的,正常情况最多三级路由,

        我一般写三级路由时,二级只用来包含三级路由用的,不会写component组件

        如图:

1、path属性第一位是否加 / ,第一级路由必须加,后面的子路由我推荐加

        如果你有三级路由,只有一级加的  / ,那么要使用  /a/b/c  能访问到c页面

                                        如果一二级加  / ,那么要使用  /b/c    能访问到c页面

                                        如果一二三级都加,那么要直接使用  /c    就能访问到c页面

总结:你最后第几级路由加 / 决定你网页的访问路径,推荐像我上面图片一样,path的

        第一位都加 / ,这样访问起来很方便。

        当然实际开发情况可能什么情况都有,如果你刚开始学,不懂找路由,使用vue开发工具devtools 查看,也很方便(没有下载的,下面那有教程)

5、安装pinia

因为是vue3+ts,安装pinia更好点,vuex拥抱ts没有pinia好

npm

 npm install pinia 

yarn

 yarn add pinia

 main.ts引入

import { createApp } from 'vue'
import App from './App.vue'
//pinia
import { createPinia } from 'pinia' 
const pinia = createPinia()

const app = createApp(App)

//pinia
app.use(pinia)

app.mount('#app')

在src下创建一个 store 文件夹,再创建一个 home.ts 文件

其它名也可以,因为pinia它有一个根文件,会把 defineStore 第一个参数当id值,相当于vuex中的 module 自动引入,也会在Vue.js devtools 插件中以第一个参数名展示(下面展示)

注意:defineStore第一个参数很重要,而且是唯一值。它的命名在devtools 插件能方便找到这个文件的数据,方便调试

import { defineStore } from 'pinia'
// useMain  可以是 useUser、useCart 之类的名字 
// defineStore('main',{..}) 在devtools 就使用 main 这个名
export const useMain = defineStore('main', {
    // 相当于data
    state: () => {
        return {
          // 所有这些属性都将自动推断其类型,如果推断失败可以试下 as xxx
          counter: 0,
          name: 'Eduardo',
        }
    },
    // 相当于计算属性
    getters: {
        doubleCount: (state) => {
            return state.counter * 2
        },
    },
    // 相当于vuex的 mutation + action,可以同时写同步和异步的代码
    actions: {
        increment() {
          this.counter++
        },
        randomizeCounter() {
            setTimeout(() => {
                this.counter = Math.round(100 * Math.random())
            }, 0);
        },
    },
})

在要使用pinia的组件

以下使用只是用的比较常用的方法,还有其它方法请查看官网   pinia中文官网 

<template>
    <div>counter:{{counter}}</div>
    <div>doubleCount:{{doubleCount}}</div>
    <a-button @click="main.randomizeCounter()">counter(round)</a-button>
    <a-button type="primary" @click="main.increment()">counter++</a-button>

    <div>{{name}}</div>
    <a-button @click="amend()">修改</a-button>
</template>
<script setup lang='ts'>

//引入想要的pinia文件 {} 里面就是对应导出的名字
import { useMain } from '../store/home'
import { storeToRefs } from 'pinia';

const main = useMain()
// 解构main里面的state和getters的数据,
// 使用storeToRefs解构才有响应式,响应式可以直接修改数据,不过这我只用来渲染
let { counter,name ,doubleCount } = storeToRefs(main)

//(常用方法三种)
//常用方法一: 使用数据
console.log( counter );
//使用方法(方法目前不能解构)
main.increment()


// 常用方法二:修改数据
counter = 9999

//常用方法三:
//进阶使用$patch,多个修改
const amend=()=>{
    main.$patch((state) => {
        state.counter += 10;
        state.name = '张三'
    })
}

</script>

 Vue.js devtools 环境下通过 defineStore 第一个参数当id值找到对应的仓库

vue-devtools插件

如果你没有vue-devtools,而又想下载这里有一个教程下载

对vue-devtools的下载、编译、安装、使用

数据持久化插件

如果你想要数据持久化可以试下这个插件,简单使用

数据持久化插件(旧推荐,无中文)

 pinia-数据持久化插件(新推荐,有中文,官网有明确的局限性提示)

6、安装axios

想要方便使用axios,想要封装统一的请求头处理,便于接口的统一管理,以及解决出现回调地狱。

可以通过下面的链接去实现

 vite + vue3 +ts 安装并封装axios

 因为写的比较多了,看起来烦,所以把一起写在别链接上,下面这些都是自己的需求来安装

7、配置@别名

在vite配置@别名,这能在开发时对路径看些来直观点。

vite配置@别名

8、自定义组件名

vue3.3+版本已经可以自定义组件名了

<script setup lang="ts">
    defineOptions({ name: '组件名' })
</script>

3.3版本以下的提示:

在 3.2.34 或以上的版本中,使用 <script setup> 的单文件组件会自动根据文件名生成对应的 name 选项,无需再手动声明。

也就是说,除非你想换名,并且又不想写两个 script 标签,就可以通过下面的链接去做。

 Vue3.3以下 setup 语法糖下如何定义组件名称
vue3获取组件名,自定义缓存组件,自定义清除缓存组件

9、安装element-puls组件库

安装自动按需导入element-puls组件。如果不使用element,可以试下 Ant Design Vue 组件库,一般只要一个就够了。

vite + vue + ts 自动按需导入 Element Plus组件,与按需导入后的ElMessage与ElLoading 的问题

10、安装 Ant Design Vue 组件库

安装自动按需导入Ant Design Vue 组件。

vite + vue3 + ts 自动按需导入ant-design-vue组件

11、安装与使用Echarts

这个看你的项目要不要使用Echarts,如果不用可以忽略。

安装与使用Echarts,这个链接的方法是在vite+vue3,而且是固定的宽高,不是响应式的可视化。

vue3 + ts 在 setup 下使用Echarts

完成! ✨ 

如果哪有不对的地方,请留言,我看到就会修改

转载请注明出处或者链接地址:https://www.qianduange.cn//article/2009.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!