彩票网站模版企业策划咨询公司
目前TypeScript语言使用的繁多，而这次模板是 Vite 项目（monorepo）
pnpm设置镜像源
pnpm 设置镜像源
pnpm config set registry https://registry.npmmirror.com，查询配置是否成功pnpm config list
下载pnpm及node
先从项目的
package.json文件中查pnpm和node所需要的版本，进行安装，如果在pnpm安装后，重新安装了node版本，则需要重新安装pnpm
首先找到
pnpm(包管理器)的版本，可以找，执行npm install -g pnpm@10.12.2进行安装
注意：因为pnpm依赖于Node.js环境，而pnpm10.12.2版本需要node18.12+版本，所以在安装pnpm时，先切换到node到node18.12+版本）
如果npm install 安装失败报错
npm error Cannot read properties of null (reading 'matches'),这时要么清缓存npm cache clean --force，要么删依赖包重下（不推荐使用npm）
这里报错，node版本(16)太低,需要升级到18+，所以这里执行
nvm list查看node的安装过的版本，并切换node版本nvm use 20.9.0
执行pnpm --version和node --verison查看版本
删除包
将项目的node_modules依赖包删除,这里执行pnpm install 会通过package.json 文件，进行重新下载依赖包
启动服务
貌似没什么用
pnpm --filter vite dev
pnpm dev
创建vue项目及运行
- 创建项目 (在任意文件下cmd执行)
使用 NPM:npm create vite@latest使用 Yarn:yarn create vite使用 PNPM:
pnpm create vite
- 打包运行项目( 输入项目名，包名，及要使用的框架)
cd /刚刚构建的项目（一级目录）
pnpm install
pnpm run dev
- 浏览器预览
http://127.0.0.1:5173/
项目结构介绍
1. index.html
这个就是vue项目的总页面，会去展示核心标签
<div id="app"></div>
<!doctype html>
<html lang="en"><head><meta charset="UTF-8" /><link rel="icon" type="image/svg+xml" href="/vite.svg" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Vite + Vue + TS</title></head><body><div id="app"></div><script type="module" src="/src/main.ts"></script></body>
</html>
2. App.vue
App.vue文件是一个父组件，而其他组件都是他的儿子组件，该vue文件算是一个特殊的html文件，里面包含html，js,css
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script><template><div><a href="https://vite.dev" target="_blank"><img src="/vite.svg" class="logo" alt="Vite logo" /></a><a href="https://vuejs.org/" target="_blank"><img src="./assets/vue.svg" class="logo vue" alt="Vue logo" /></a></div><HelloWorld msg="Vite + Vue" />
</template><style scoped>
.logo {height: 6em;padding: 1.5em;will-change: filter;transition: filter 300ms;
}
.logo:hover {filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
关注点应该是这个 import HelloWorld from './components/HelloWorld.vue' ,这里是父组件引入子组件， 而 <HelloWorld msg="Vite + Vue" /> 表示父组件向子组件HelloWWorld.vue传递了一个字符串参数msg="Vite + Vue"
3.HelloWorld.vue
这是个子组件，由父组件
App.vue调用
<script setup lang="ts">
import { ref } from 'vue'defineProps<{ msg: string }>()const count = ref(0)
</script><template><h1>{{ msg }}</h1><div class="card"><button type="button" @click="count++">count is {{ count }}</button><p>Edit<code>components/HelloWorld.vue</code> to test HMR</p></div><p>Check out<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank">create-vue</a>, the official Vue + Vite starter</p><p>Learn more about IDE Support for Vue in the<ahref="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"target="_blank">Vue Docs Scaling up Guide</a>.</p><p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
</template><style scoped>
.read-the-docs {color: #888;
}
</style>这里我们看出
import { ref } from 'vue' 表示从Vue库中导入 ref 函数，ref是一个响应式函数（类似java导入某类的工具）
defineProps<{ msg: string }>() 表示接收父组件传递过来的msg字符串
const count = ref(0) 创建一个响应式的数据引用,count是一个变量名，并将0传给ref函数作为初始值，意味着当count值发生改变，vue组件也会自动更新
{{ msg }} 是vue的插值语法，即将父组件传递过来的msg 信息显示出来
4. main.ts
main.ts是应用程序的入口文件，也是让父组件App.vue与index.html文件的<div id="app"></div>产生联系
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'createApp(App).mount('#app')
import { createApp } from 'vue' : 从vue导入createApp函数，用于创建Vue项目
import App from './App.vue': 导入父组件App.vue
createApp(App).mount('#app'): 创建一个Vue项目实例，并将父组件App.vue挂载到 id 为app的标签下
使用ElementPlus
1. 安装对应组件
pnpm install element-plus
我们在使用 Vue 和其对应的 组件之类时，都可能会需要这两个插件的帮助，帮助我们实现按需自动导入，避免全量引入的尴尬以及每个文件都要手动导入 API 的低效重复搬砖。
pnpm add -D unplugin-auto-import
pnpm add -D unplugin-vue-components
在 Vite 的配置文件vite.config.ts中 添加如下代码
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({// ...plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})