[Проект] vue3+vite+vant+typescript - день первый

внешний интерфейс
[Проект] vue3+vite+vant+typescript - день первый

Это 17-й день моего участия в Gengwen Challenge, Подробности о мероприятии см.:Обновить вызов

Я пишу технические статьи каждый день, и я никогда не пытался прочитать больше 100. Многие люди любят читать это из-за хвастовства.

Нет, сегодня я должен писать технические статьи, так что не хвастайтесь. .

Недавно по прихоти хочу запустить проект.Сделал сам.Код ядра не публичный,но есть хорошие пакеты и идеи.Поможем найти баги.

  1. Прежде всего, мы должны убедиться, что наша версия узла >= 12.0.0, выполнить ее в командной строке.node-vВы можете проверить версию узла

Если версия узла ниже 12, то...

node有一个模块叫n（这名字可够短的。。。），是专门用来管理node.js的版本的。
第一步：首先安装n模块：
npm install -g n

第二步：升级node倒最新稳定版
n stable
(n后面也可以跟版本号)
n v14.15.1
或者
n 14.15.1

## 就完事儿了
  1. Начать сборку проекта

Сначала введите путь, по которому вам нужно создать проект

Используйте нпм:npm init @vitejs/app aFeiaFei - название проекта

Используйте пряжу:yarn create @vitejs/app aFeiaFei - название проекта

image.pngПотом:

? Project name: enter
? Select a template: ...   vue
? Select a variant: vue-ts

##就完事儿了

Получил чистый проект vue3.0 + typescript

image.png

  1. настроить vite.config.ts

Эта штука, игроки которые играют в vue должны это понимать, самая базовая конфигурация

import { defineConfig } from "vite"
import vue from "@vitejs/plugin-vue"
import path from "path"
 
export default defineConfig({
  plugins: [vue()],
  base: "./",
  resolve: {
      alias: {
          // 如果报错__dirname找不到，需要安装node,执行npm install @types/node --save-dev
          "@": path.resolve(__dirname, "./src"),
          "@assets": path.resolve(__dirname, "./src/assets"),
          "@components": path.resolve(__dirname, "./src/components"),
          "@views": path.resolve(__dirname, "./src/views"),
          "@store": path.resolve(__dirname, "./src/store"),
      },
  },
  build: {
      outDir: "dist",
  },
  server: {
      https: false, // 是否开启 https
      open: false, // 是否自动在浏览器打开
      port: 8001, // 端口号
      host: "0.0.0.0",
      proxy: {
          "/api": {
              target: "", // 后台接口
              changeOrigin: true,
              secure: false, // 如果是https接口，需要配置这个参数
              // ws: true, //websocket支持
              rewrite: (path) => path.replace(/^\/api/, ""),
          },
      },
  },
  // 引入第三方的配置
  optimizeDeps: {
    include: [],
  },
})
  1. Внедрить ванту глобально, неплохо для этого кусочка памяти, самостоятельных проектов и усердно работать над созданием (я работаю над мобильным терминалом)
  • npm: npm i vant@next -S
  • yarn: yarn add vant@next

image.png

  1. Просто импортируйте vant и vant css глобально в main.js

image.png

Давай сначала сюда напишем.Ведь это довольно длинно.Нехорошо писать по 10000 слов за раз.Этот проект не будет евнухом,не переживай.

Чувак, обрати внимание на мой паблик аккаунт Дак, я все еще хочу заработать деньги на сухое молоко, дай мне немного мотивации. Спасибо

Нет публики:小何成长

повествование:

Технический документ

Беспорядок серии

вью серия

машинописная серия

реактивная серия

Я ленив и не хочу сопоставлять картинки, это все содержимое моего блога (галантерея), надеюсь, я смогу всем помочь

Нет публики:小何成长, буддизм более написан, это все ямы, на которые я наступил, или то, чему я научился

Заинтересованные друзья могут подписаться на меня, я:何小玍。Давайте добиваться прогресса вместе

Категории