vue2+vite

Vue2+vite

1.安装yarn         npm install -g yarn

2.查看版本         yarn --version

3.创建项目         create-vite-app   vue3-vite(项目名称)

4.进入项目         cd vue3-vite

5.导入依赖         npm  install

6.安装typescript    yarn add typescript  -D

7.初始化tsc        npx tsc --init

8.将main.js改为main.ts    

9. 修改App.vue 和HelloWorld.vue  里的<>script>加上lang=’ts’ 变成 <script lang="ts">

10.App.vue和HelloWorld.vue虽然报错,但仍可正常运行

11.试运行           npm  run dev

12.在更目录下新建 shim.d.ts文件,如下图(也可用命令创建  New-Item  shim.d.ts即可  )

13.将下面代码粘贴到shim.d.ts 文件中,就不报错了,试运行,看下效果.

declare module "*vue" {

  import { Component } from "vue";

  const component: Component;

  export default component;

}

14.安装vue-router路由   yarn add  vue-router@5.0    选择最新的(没有选择项就把版本号改大  例如 @6.0  @7.0)

15.在src里新建router文件夹

16.在router文件夹里新建index.ts, 将下面代码粘贴到router文件夹里的index.ts里

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

//在  Vue-router新版本中,需要使用createRouter来创建路由

export default createRouter({

  //指定路由的模式,此处使用的是hash模式

  history: createWebHashHistory(),

  //路由地址

  routes: [],

});

17.安装vuex    yarn add vuex@5.0 选择最新的(没有选择项就把版本号改大  例如 @6.0  @7.0)

18.在src下新建store文件夹,并在里面创建index.ts,将下面代码粘贴进srore里index.ts里

import { createStore } from "vuex";

interface State {

  userName: string;

}

export default createStore({

  state: {

    userName: "yl",

  },

});

19.修改main.ts,用下面内容替换到main.ts里的内容

import { createApp } from "vue";

import  App  from "./App.vue";

import  "./index.css";

import  router  from "./router/index";  //新增

import  vuex  from "./store/index";  //新增

const app = createApp(App);

app.use(router);  //新增

app.use(vuex); //新增

app.mount("#app");

20. 安装sass      yarn add sass sass-loader -D

21.删除多余文件  HelloWorld.vue

22.将App.vue里面和HelloWorld有关的代码都删除,剩余如下

<template>

  <div id=”app”><div id=”main”></div></div>

</template>

<script lang="ts">

export default {

  name: "App",

};

</script>

<style lang="scss" scoped >

</style>

在项目根目录新建vite.config.ts   (New-Item vite.config.ts)

import type { UserConfig } from "vite";

const viteConfig: UserConfig = {

  /**端口号 可改 */

  port: 3556,

  /**代理 解决跨域*/

  proxy: {

    "/api": {

      target: "https://uni937d4b0-6cc760.servie.tcloudbase.com",

      changeOrigin: true,

      ws: true,

      rewrite: path => path.replace(/^\/api/, "")

    },

  },

  /**hostname */

  hostname: "localhost",

  /**运行自动打开浏览器 */

  open: false,

};

export default viteConfig;

引入网络请求(有服务器端)

1. 在src下新建api文件夹.
2. npm install axios  引入axios
3. 新建axios.ts,将下面的代码输入

import axios from 'axios'

let instance = axios.create({

    baseURL: "http:localhost:3356/api/"

})

export default instance

1. 在vite.config.ts里设置代理.

  /**代理 解决跨域*/

  proxy: {

    "/api": {

      target: "https://uni937d4b0-6cc760.servie.tcloudbase.com",

      changeOrigin: true,

      ws: true,

      rewrite: path => path.replace(/^\/api/, "")

    },

  },

1. 在api文件夹里新建index.ts,用来管理接口,例如:

import instance from "./axios"

export const getBannerList = () => {

    return instance({

        url: "/bannerList"

    })

}

export default {

    getBannerList

}

1. 使用查看,在要访问的网络的views.vue里使用axios.

A: 引入导包     import { getBannerList } from "../api/index";

B:在setup(){} 里的reactive()里创建变量接收返回值

C:在setup(){} 里写请求,并赋值

D:在onBeforeMount()里调用网络请求

如下图:

Mockjs(无服务器端,也要先集成axios)

如果没有服务器端可以考虑使用mockjs,模拟后台返回json,(完全前端模拟返回值)

1. 安装   yarn add mockjs -S
2. 在src 目录下新建mockjs.ts,并引入mockjs  import Mock  from ‘mockjs’
3. 这时引入的’mockjs’会报红,因为ts无法识别mockjs,所以在shim.d.ts的外面尾部添加 declare module ‘mockjs’ 就不会报错了.如下图:

1. 在mockjs.ts 就可以写返回值了,例如:

import Mock from 'mockjs'

//接口一

Mock.mock('/api/bannerList', 'get', {

    "data": [

        {

            "id": "1",

            "img": "https://pic4.zhimg.com/v2-f05c0e1005121e89e53762704d05b28c_fhd.jpg?source=8673f162",

            "title": "金发？"

        },

        {

            "id": "2",

            "img": "https://pic2.zhimg.com/v2-86bcc639835a991b61602b73310604b8_fhd.jpg?source=8673f162",

            "title": "电影人物？"

        },

        {

            "id": "3",

            "title": "玩桌游？",

            "img": "https://pic1.zhimg.com/v2-89f0e1611118a7e15694060542eeba7a_fhd.jpg?source=8673f162"

        }

    ]

})

//接口二

Mock.mock('/api/newsList', 'get', {

    "data": [

        {

            "id": "1",

            "images": [

                "https://pic4.zhimg.com/v2-f05c0e1005121e89e53762704d05b28c_fhd.jpg?source=8673f162",

            ],

            "title": "种族？",

            "author": "作者"

        },

        {

            "id": "2",

            "title": "人物差别？",

            "author": "作者",

            "images": [

                "https://pic2.zhimg.com/v2-86bcc639835a991b61602b73310604b8_fhd.jpg?source=8673f162"

            ]

        },

        {

            "id": "3",

            "title": "玩桌游？",

            "author": "作者",

            "images": [

                "https://pic1.zhimg.com/v2-89f0e1611118a7e15694060542eeba7a_fhd.jpg?source=8673f162"

            ]

        }

    ]

})

1. 注释掉vite.config.ts里的代理,如下图:

1. 修改src-->api--->axios.ts里的baseURL,去掉前缀,如下图:

1. 在main.ts里引入import './api/mockjs'

8.使用查看,在要访问的网络的views.vue里使用axios.

A: 引入导包     import { getBannerList } from "../api/index";

B:在setup(){} 里的reactive()里创建变量接收返回值

C:在setup(){} 里写请求,并赋值

D:在onBeforeMount()里调用网络请求

如下图:

1. 完成,运行npm run dev查看结果

附件源码: