vue3使用

weixin_46209352

已于 2022-06-27 09:38:44 修改

阅读量169

点赞数

文章标签： vue.js typescript javascript

于 2020-12-29 18:10:22 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_46209352/article/details/110728551

版权

该博客主要介绍了使用Vue和TypeScript创建项目的步骤，包括选择vue和vue - ts，安装axios并添加接口访问域名、开启跨域，还依次安装了element - plus、router、pinia、pinia - use - persist等，并说明了在main.ts文件添加相关配置以及在src下新建文件夹和添加ts文件等操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

创建项目：

npm create vite

选择vue，vue-ts
在这里插入图片描述

安装axios：

npm install axios --save -dev

添加接口访问域名，跟开启跨域
在这里插入图片描述

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// import path from "path"
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  server: {
  port: 9001,
  proxy: {
      '/api': {
      target: 'https://api.atim2k.top/',
      //跨域		PS:如果使用本地接口需要注释 changeOrigin: true,
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, '')
    }
  }
}
})

安装element-plus

npm install element-plus --save

main.ts添加

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

Vue.use(ElementPlus);

安装router

npm install vue-router@next -S

在src下新建router文件夹

import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router';

const routes = [
  {
    path: '/',
    component: () => import('../views/Home.vue')
  },
  {
    path: '/demo',
    component: () => import('../views/Demo.vue')
  },
  {
    path: '/film',
    component: () => import('../views/Film.vue')
  }
];


const router = createRouter({
  history: createWebHashHistory(),  // hash路由模式
  // history: createWebHistory(),  // history路由模式
  routes
});

export default router;

main.ts添加

import router from '../src/router/index'

Vue.use(router);

安装pinia

npm install pinia@2.0.14

main.ts添加

import { createPinia } from 'pinia'
const pinia = createPinia()

Vue.use(pinia);

安装pinia-use-persist

npm i pinia-use-persist

main.ts添加

import {usePersist} from "pinia-use-persist";
pinia.use(usePersist)

src下添加ts文件
在这里插入图片描述

// src/store/index.js
 // 引入仓库定义函数
 import { defineStore } from 'pinia'

 import axios from 'axios'
 // 传入2个参数，定义仓库并导出
 // 第一个参数唯一不可重复，字符串类型，作为仓库ID以区分仓库
 // 第二个参数，以对象形式配置仓库的state,getters,actions
 // 配置 state getters actions
 export const mainStore = defineStore('main', {
   // state 类似组件的data选项，函数形式返回对象
   state: () => {
     return {
       msg: 'hello worldasdfasdfasdf!',
       counter: 0
     }
   },
   getters: {},
   persist: {
    enabled: true,
    encryptionKey: 'main',
   },
   actions: {
    
   }
 })