随笔 - 242  文章 - 2  评论 - 7  阅读 - 19万 

描述

学习博文[ https://juejin.cn/post/7121759118070644772#heading-21 ]

1、项目构建步骤:

# 1、新建文件夹 study-vite-svelte
# 2、下载模板的命令
npm init vite@latest

# 3、输入项目名
vite-svelte-y

# 4、选择 Svelte 模板
双选 -> svelte

# 5、进入项目并安装依赖
cd vite-svelte-y
npm install

# 6、运行项目
npm run dev

# 7、在浏览器访问 http://127.0.0.1:5173/

# 8、访问后页面不显示,控制台报错
# Uncaught ReferenceError: globalThis is not defined at overlay.ts:120
# 在index.html中添加<script> this.globalThis || (this.globalThis = this) </script>处理

2、项目构建成功目录展示

vite-svelte-y
|-- .vscode
	|---- extensions.json
|-- node_modules
|-- public
	|---- vite.svg
|-- src
	|---- assets
		|------- svelte.svg
	|---- lib
		|------- Counter.svelte
	|---- app.css
	|---- app.svelte
	|---- main.js
	|---- vite-env.d.ts
--.gitignore
-- index.html
-- jsconfig.json
-- package-lock.json
-- package.json
-- README.md
-- vite.config.js
3、Package.json
{
  "name": "vite-svelte-y",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@sveltejs/vite-plugin-svelte": "^1.0.1",
    "svelte": "^3.49.0",
    "vite": "^3.0.7"
  }
}

4、vite.config.js

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte()]
})

5、Other

npm create svelte@latest my-app
cd my-app
npm install
npm run dev -- --open

6、路由

npm i svelte-router-spa

package.json

"start": "sirv public -s"

7、问题记录

1Error: terser not found. Since Vite v3, terser has become an optional dependency. You need to install it.

 Solve:npm install terser

2Dynamic require of "path" is not supported

 Solve:引用const { resolve } = require('path') 报错,改为import { resolve } from 'path'

3JSX element class does not support attributes because it does not have a '$$prop_def' property.
在项目中新建tsConfig.json文件夹,内容如下
{
    "compilerOptions": {
        "outDir":"./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module":"commonjs",
        "target":"es6",
        "jsx":"react"
    }
}

posted on   羽丫头不乖  阅读(2109)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)
点击右上角即可分享
微信分享提示