pnpm+vite+vue3+ts+tailwindcss+element-puls初始化项目笔记

真的太抽象了
571 阅读4分钟

环境安装

node

安装node 16以上版本 registry.npmmirror.com/binary.html… 下载安装

pnpm

npm install -g pnpm

项目搭建

创建项目

pnpm create vite

在交互环境中输入项目名称，选择vue以及TS

image.png

错误处理1 -> pnpm : 无法加载文件 D:\npm\npmGlobal\pnpm.ps1，因为在此系统上禁止运行脚本。

这是因为PowerShell 执行策略限制所导致的,默认策略是Restricted，改为RemoteSigned既可

#查看当前策略
Get-ExecutionPolicy
#更改策略
Set-ExecutionPolicy RemoteSigned -Scope CurrentUser

升级typescript和vscode

如果是新安装的typescript和vscode,项目是没有问题的，如果是很久之前的vscode或者ts，就需要升级，否则会报红，且报错内容为: Cannot find module ‘vue’. Did you mean to set the ‘moduleResolution’ option to ‘node’, or to add aliases to the ‘paths’ option?

#这是全局安装,所有项目可用
npm install -g typescript

vscode升级: Help -> Check or Updates 升级到最新版本

错误处理2 -> Cannot find module ‘./App.vue‘ or its corresponding type declaration

main.ts 引入App.uve报错，这是因为ts不识别.vue后缀的文件，需要加点配置

在src-> vite-env.d.ts文件中增加以下配置

declare module "*.vue" {
    import { DefineComponent } from "vue"
    const component: DefineComponent<{}, {}, any>
    export default component
  }

引入element-plus

#安装
pnpm install element-plus

引用,这里直接将国际化配置写上,因为做国内的，中文就行

import { createApp } from "vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import App from "./App.vue";

const app = createApp(App);

app.use(ElementPlus, {locale: zhCn,});
app.mount("#app");

因为引入的是zhCn 是js，而项目是ts的，会报错

image.png

在tsconfig.json里面，在compilerOptions对象中，加入以下配置

    "noImplicitAny": false,
    "allowJs": true,

删除不需要的文件

将红框中的文件删除

image.png

清空App.vue的内容，写上以下模版

<script setup lang="ts">
</script>

<template>
</template>

<style scoped>
</style>

重置css

在src下创建一个style目录，然后创建一个reset.scss文件,填充以下内容，或者直接npmjs下复制(项目css会使用sass): www.npmjs.com/package/res…

#scss文件需要安装sass来解析
pnpm i sass

#然后在main.ts 中引入css文件
import "@/style/reset.scss";

如果觉得麻烦可以用这个: www.npmjs.com/package/res…

/**
 * ENGINE
 * v0.2 | 20150615
 * License: none (public domain)
 */

 *,
 *:after,
 *:before {
     box-sizing: border-box;
 
     outline: none;
 }
 
 html,
 body,
 div,
 span,
 applet,
 object,
 iframe,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p,
 blockquote,
 pre,
 a,
 abbr,
 acronym,
 address,
 big,
 cite,
 code,
 del,
 dfn,
 em,
 img,
 ins,
 kbd,
 q,
 s,
 samp,
 small,
 strike,
 strong,
 sub,
 sup,
 tt,
 var,
 b,
 u,
 i,
 center,
 dl,
 dt,
 dd,
 ol,
 ul,
 li,
 fieldset,
 form,
 label,
 legend,
 table,
 caption,
 tbody,
 tfoot,
 thead,
 tr,
 th,
 td,
 article,
 aside,
 canvas,
 details,
 embed,
 figure,
 figcaption,
 footer,
 header,
 hgroup,
 menu,
 nav,
 output,
 ruby,
 section,
 summary,
 time,
 mark,
 audio,
 video {
     font: inherit;
     font-size: 100%;
 
     margin: 0;
     padding: 0;
 
     vertical-align: baseline;
 
     border: 0;
 }
 
 article,
 aside,
 details,
 figcaption,
 figure,
 footer,
 header,
 hgroup,
 menu,
 nav,
 section {
     display: block;
 }
 
 body {
     line-height: 1;
 }
 
 ol,
 ul {
     list-style: none;
 }
 
 blockquote,
 q {
     quotes: none;
     &:before,
     &:after {
         content: '';
         content: none;
     }
 }
 
 sub,
 sup {
     font-size: 75%;
     line-height: 0;
 
     position: relative;
 
     vertical-align: baseline;
 }
 sup {
     top: -.5em;
 }
 sub {
     bottom: -.25em;
 }
 
 table {
     border-spacing: 0;
     border-collapse: collapse;
 }
 
 input,
 textarea,
 button {
     font-family: inhert;
     font-size: inherit;
 
     color: inherit;
 }
 
 select {
     text-indent: .01px;
     text-overflow: '';
 
     border: 0;
     border-radius: 0;
 
     -webkit-appearance: none;
        -moz-appearance: none;
 }
 select::-ms-expand {
     display: none;
 }
 
 code,
 pre {
     font-family: monospace, monospace;
     font-size: 1em;
 }

组件引用配置

编写项目，为了方便引用项目内 其它文件，配置一个快速方式

#安装node包，该包带了不少工具
npm install @types/node --save-dev

在vite.config.ts中配置

  resolve: {
    alias: {
      "@": path.resolve(__dirname, "src"),
    },
  },

集成TailwindCss

官方安装文档: tailwind.nodejs.cn/docs/guides…

安装相关包

pnpm install -D tailwindcss postcss autoprefixer

自动创建配置文件

#进入项目中
cd demo1 
#执行以下命令，会自动创建postcss.config.js 和 tailwind.config.js  2个配置文件
npx tailwindcss init -p

配置模版路径

编辑tailwind.config.js配置文件，将内容更新为以下

/** @type {import('tailwindcss').Config} */
export default {
  content: ["index.html", "./src/**/*.{html,js,ts,jsx,tsx,vue}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

添加指令

在src->style 目录下创建style.css文件，内容如下

@tailwind base;
@tailwind components;
@tailwind utilities;

在main.ts中引入文件

import "./style/style.css"

样式测试

在App.vue 中写入以下html代码，然后启动项目

  <p class="text-blue-600 text-2xl text-center">
    The quick brown fox...
  </p>

页面文字是蓝色并居中的样式，说明生效 image.png

封装axios

安装

pnpm i axios

简单封装

在src下创建utils目录，创建request.ts文件

import axios from "axios";
import { ElMessage } from "element-plus";

#https://api.apiopen.top 是一个开放的api网站，提供简单测试，不要做为生产使用.
const request = axios.create({
  baseURL: "https://api.apiopen.top",
  timeout: 5000,
  withCredentials: false,
});

request.interceptors.request.use((config) => {
  return config;
});

request.interceptors.response.use(
  (response) => {
    return response.data;
  },
  (error) => {
    let status = error.response.status;
    switch (status) {
      case 404:
        ElMessage({
          type: "error",
          message: error.message,
        });
        break;
      case 500 | 501 | 502 | 503 | 504:
        ElMessage({
          type: "error",
          message: error.message,
        });
        break;
    }
    return Promise.reject(error);
  }
);

export default request;

调用api

import request from '@/utils/request'

export function getApiSentences() {
    return request.get('/api/sentences')
}

import { getApiSentences } from "@/api/video";

onMounted(() => {
  getApiSentences().then((res) => {
    console.log(res)
  })
});

image.png

avatar
文章
阅读
粉丝