用于记录手工搭建一个solidjs环境的流程，后面忘记了懒得再去翻资料。
默认已有node环境。
安装vite
npm install vite配置package文件
安装的vite功能，基本可以通过node_modules/.bin/下的vite脚本直接运行。也可以使用npx vite运行
但是为了项目环境还是配置一下package文件。
主要是配置scripts部分。这一部分本质也是直接运行两大系统的shell或者cmd脚本
{
"scripts":{
"dev":"vite",
"build":"vite build",
"preview":"vite preview"
}
}配置index.html
index.html按照官方文档的意思是vite工具下的程序入口，直接创建在node项目根路径下。也可以通过配置vite.config.js的方式调整入口。参考：1.index.html 与项目根目录2.多页面应用模式
注意导入solidjs的代码入口
<html>
<head>
<title>test app</title>
<!-- 这里是程序入口 -->
<script type="module" src="./src/index.jsx"></script>
<!-- 这里是程序入口 -->
</head>
<body>
<div id="app"></div>
</body>
</html>配置vite.config.js
参考官方文档，在项目根目录下创建一个vite.config.js文件。简单构造一个配置。
参考：vite官方配置文档
import { defineConfig } from "vite"
// vite.config.js
export default defineConfig(
{
server: {
port: 3000,
open: true,
proxy: {}
},
base: '/',
build: {
outDir: 'dist',
assetsDir: 'assets',
assetsInlineLimit: 4096,
rollupOptions: {
output: {
chunkFileNames: 'assets/js/[name]-[hash].js',
entryFileNames: 'assets/js/[name]-[hash].js',
assetFileNames: 'assets/[name]-[hash].[ext]'
}
}
}
}
)安装vite插件vite-plugin-solid
命令：
npm install vite-plugin-solid调整vite.config.js,导入并追加插件配置
import solidPlugin from vite-plugin-solid
{
plugins:[solidPlugin()],
}安装solid并导入solid构造项目
安装
npm install solid-js babel-preset-solid在src目录下创建index.jsx和App.jsx文件
编写基本程序
1.index.jsx
import { render } from 'solid-js/web'
import App from './App'
render(() => <App />, document.getElementById('app'))2.App.jsx
function App(){
return (
<div>
test
</div>
)
}
export default App;构造好以后直接启动，不出意外的话可以使用了
Comments | NOTHING