vue3+vite+typescript
<p>1.创建项目</p><div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">npm init vite@latest <project-name> </span><br><span style="color: rgba(0, 128, 0, 1)"># or</span><br><span style="color: rgba(0, 128, 0, 1)"><code><span class="token function">npm init vite-app hello-vue3 <span class="token comment"> <br># or <br>yarn create vite-app hello-vue3</span></span></code></span></pre>
</div>
<p>2. 配置端口号 以及配置别名，解决vue中 引入ref..的插件</p>
<div class="cnblogs_code">
<div><span style="color: rgba(0, 128, 0, 1)">配置端口号+配置代理：</span></div>
<div><span style="color: rgba(0, 128, 0, 1)">打开 vite.config.ts 文件：</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> 添加server就可以了</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"><span class="hljs-comment"><span class="hljs-attr"> server: {</span></span></span><span style="color: rgba(0, 128, 0, 1)"> </span></div>
<div>
<div> <span style="color: rgba(0, 128, 0, 1)"> host: '0.0.0.0',</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> port: 8080,</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> open: true,</span></div>
</div>
<div><span style="color: rgba(0, 128, 0, 1)"><span class="hljs-comment"><span class="hljs-attr"><span class="hljs-attr"> proxy: { </span></span></span></span></div>
<div><span style="color: rgba(0, 128, 0, 1)"><span class="hljs-comment"><span class="hljs-attr"><span class="hljs-attr"><span class="hljs-string"> '/api': { </span></span></span></span></span></div>
<div><span style="color: rgba(0, 128, 0, 1)"><span class="hljs-comment"><span class="hljs-attr"><span class="hljs-attr"><span class="hljs-string"><span class="hljs-attr"> target: <span class="hljs-string">"http://localhost:3000", </span></span></span></span></span></span></span></div>
<div><span style="color: rgba(0, 128, 0, 1)"><span class="hljs-comment"><span class="hljs-attr"><span class="hljs-attr"><span class="hljs-string"><span class="hljs-attr"><span class="hljs-string"><span class="hljs-attr"> changeOrigin: <span class="hljs-literal">true, </span></span></span></span></span></span></span></span></span></div>
<div><span style="color: rgba(0, 128, 0, 1)"><span class="hljs-comment"><span class="hljs-attr"><span class="hljs-attr"><span class="hljs-string"><span class="hljs-attr"><span class="hljs-string"><span class="hljs-attr"><span class="hljs-literal"><span class="hljs-attr"> pathRewrite: { </span></span></span></span></span></span></span></span></span></span></div>
<div><span style="color: rgba(0, 128, 0, 1)"><span class="hljs-comment"><span class="hljs-attr"><span class="hljs-attr"><span class="hljs-string"><span class="hljs-attr"><span class="hljs-string"><span class="hljs-attr"><span class="hljs-literal"><span class="hljs-attr"><span class="hljs-string"> '^/api': <span class="hljs-string">'/api' </span></span></span></span></span></span></span></span></span></span></span></span></div>
<div><span style="color: rgba(0, 128, 0, 1)"><span class="hljs-comment"><span class="hljs-attr"><span class="hljs-attr"><span class="hljs-string"><span class="hljs-attr"><span class="hljs-string"><span class="hljs-attr"><span class="hljs-literal"><span class="hljs-attr"><span class="hljs-string"><span class="hljs-string"> } </span></span></span></span></span></span></span></span></span></span></span></span></div>
<div><span style="color: rgba(0, 128, 0, 1)"><span class="hljs-comment"><span class="hljs-attr"><span class="hljs-attr"><span class="hljs-string"><span class="hljs-attr"><span class="hljs-string"><span class="hljs-attr"><span class="hljs-literal"><span class="hljs-attr"><span class="hljs-string"><span class="hljs-string"> } </span></span></span></span></span></span></span></span></span></span></span></span></div>
<div><span style="color: rgba(0, 128, 0, 1)"><span class="hljs-comment"><span class="hljs-attr"><span class="hljs-attr"><span class="hljs-string"><span class="hljs-attr"><span class="hljs-string"><span class="hljs-attr"><span class="hljs-literal"><span class="hljs-attr"><span class="hljs-string"><span class="hljs-string"> }, </span></span></span></span></span></span></span></span></span></span></span></span></div>
<div><span style="color: rgba(0, 128, 0, 1)"><span class="hljs-comment"><span class="hljs-attr"><span class="hljs-attr"><span class="hljs-string"><span class="hljs-attr"><span class="hljs-string"><span class="hljs-attr"><span class="hljs-literal"><span class="hljs-attr"><span class="hljs-string"><span class="hljs-string"> }</span></span></span></span></span></span></span></span></span></span></span></span></div>
<div><span style="color: rgba(0, 128, 0, 1)">配置别名：</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> 在vite.config.ts文件中引入:</span><br><span class="hljs-keyword" style="color: rgba(0, 128, 0, 1)"> const path = <span class="hljs-built_in">require(<span class="hljs-string">'path');</span></span></span></div>
<div>
<div><span style="color: rgba(0, 128, 0, 1)"> resolve: {</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> alias: {</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> <span class="hljs-string">'@': path.<span class="hljs-title function_">resolve(__dirname, <span class="hljs-string">'./src'),</span></span></span></span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> }</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> }</span></div>
<div> </div>
<div><span style="color: rgba(0, 128, 0, 1)">下载插件 npm i unplugin-<span class="hljs-keyword">auto-<span class="hljs-keyword">import -D</span></span></span></div>
<div><span class="hljs-comment" style="color: rgba(0, 128, 0, 1)">引入插件 <span class="hljs-keyword">import <span class="hljs-title class_">AutoImport <span class="hljs-keyword">from <span class="hljs-string">'unplugin-auto-import/vite'; // setup语法糖插件 : 解决import { ref , reactive ... } 引入的问题</span></span></span></span></span></div>
<div><span class="hljs-comment" style="color: rgba(0, 128, 0, 1)"><span class="hljs-keyword"><span class="hljs-title class_"><span class="hljs-keyword"><span class="hljs-string">配置： </span></span></span></span></span></div>
<div><span class="hljs-comment" style="color: rgba(0, 128, 0, 1)"><span class="hljs-keyword"><span class="hljs-title class_"><span class="hljs-keyword"><span class="hljs-string"> <span class="hljs-keyword">import vue <span class="hljs-keyword">from <span class="hljs-string">'@vitejs/plugin-vue';</span></span></span></span></span></span></span></span></div>
<div><span class="hljs-comment" style="color: rgba(0, 128, 0, 1)"><span class="hljs-keyword"><span class="hljs-title class_"><span class="hljs-keyword"><span class="hljs-string"> <span class="hljs-attr">plugins: [ <span class="hljs-title function_">vue(),</span></span></span></span></span></span></span></div>
<div><span class="hljs-comment" style="color: rgba(0, 128, 0, 1)"><span class="hljs-keyword"><span class="hljs-title class_"><span class="hljs-keyword"><span class="hljs-string"><span class="hljs-attr"><span class="hljs-title function_"><span class="hljs-comment"> //配置插件 </span></span></span></span></span></span></span></span></div>
<div><span class="hljs-comment" style="color: rgba(0, 128, 0, 1)"><span class="hljs-keyword"><span class="hljs-title class_"><span class="hljs-keyword"><span class="hljs-string"><span class="hljs-attr"><span class="hljs-title function_"><span class="hljs-comment"><span class="hljs-title class_"> AutoImport({ <span class="hljs-attr">imports:[<span class="hljs-string">'vue',<span class="hljs-string">'vue-router'] }) </span></span></span></span></span></span></span></span></span></span></span></span></div>
<div><span class="hljs-comment" style="color: rgba(0, 128, 0, 1)"><span class="hljs-keyword"><span class="hljs-title class_"><span class="hljs-keyword"><span class="hljs-string"><span class="hljs-attr"><span class="hljs-title function_"><span class="hljs-comment"><span class="hljs-title class_"><span class="hljs-attr"><span class="hljs-string"><span class="hljs-string"> ],</span></span></span></span></span></span></span></span></span></span></span></span></div>
</div>
</div>
<p>3. 安装路由</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">npm install vue-<span class="hljs-symbol">router@<span class="hljs-number">4 -S<br><br></span></span></span><span style="color: rgba(0, 128, 0, 1)">创建router文件夹并建index.js文件：<br><span class="hljs-keyword">import { createRouter, createWebHistory } <span class="hljs-keyword">from <span class="hljs-string">"vue-router"; <br><span class="hljs-keyword">import <span class="hljs-title class_">Home <span class="hljs-keyword">from <span class="hljs-string">"../views/Home.vue"; <br><span class="hljs-keyword">const routes = [ <br>{ <span class="hljs-attr">path: <span class="hljs-string">"/", <span class="hljs-attr">name: <span class="hljs-string">"Home", <span class="hljs-attr">component: <span class="hljs-title class_">Home, }, <br>{ <br><span class="hljs-attr"> path: <span class="hljs-string">"/about", <br><span class="hljs-attr"> name: <span class="hljs-string">"About", <br><span class="hljs-attr"> component: <span class="hljs-function">() => <br><span class="hljs-title function_"> import(<span class="hljs-comment">/* webpackChunkName: "about" */ <span class="hljs-string">"../views/About.vue"), <br>}, <br>]; <br><span class="hljs-keyword">const router = <span class="hljs-title function_">createRouter({ <br><span class="hljs-attr">history: <span class="hljs-title function_">createWebHistory(), <br>routes,<br>}); <br><span class="hljs-keyword">export <span class="hljs-keyword">default router;<br><br></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>main.js文件中引入 router 文件并挂载router即可。<br>例如：<br> <span class="hljs-keyword">import router <span class="hljs-keyword">from <span class="hljs-string">"./router"; <br> createApp(App).use(router).mount(<span class="hljs-string">'#app')</span></span></span></span></span></pre>
</div>
<p>4.vscode安装插件</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">在 vscode 编辑器中安装vue3扩展：<br> 禁用 vetur 插件<br> 安装 vue language features(volar) 插件<br> 安装 element ui snippets 插件</span></pre>
</div>
<p>5.安装Pinia</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">安装下载：</span><br><span style="color: rgba(0, 128, 0, 1)"> yarn <span class="hljs-keyword">add pinia <br> or<br><span class="hljs-meta"> npm install pinia<br>main.js文件引入：<br></span></span></span></pre>
<div><span style="color: rgba(0, 128, 0, 1)"> import store from './store'</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> 并use store即可。</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> 新建store文件夹，然后创建index.js文件：</span></div>
<div>
<div><span style="color: rgba(0, 128, 0, 1)"> import {createPinia} from 'pinia';</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> import piniaPluginPersist from 'pinia-plugin-persist'; //这个插件是用来做持久化存储的</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> const store = createPinia();</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> store.use(piniaPluginPersist);</span></div>
<br>
<div><span style="color: rgba(0, 128, 0, 1)"> export default store;</span></div>
<div> </div>
<div> <span style="color: rgba(0, 128, 0, 1)">开始使用，例如创建一个user.js文件：</span></div>
<div>
<div><span style="color: rgba(0, 128, 0, 1)"> import {defineStore} from 'pinia';</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> export const useUserStore = defineStore({</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> id: 'user',</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> state:()=>{</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> return {</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> token: ''</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> }</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> },</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> getters: {}, //这个跟vuex作用是差不多一样</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> actions: {</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> setToken(token){</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> this.token = token;</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> }</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> },</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> persist:{</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> enabled: true,</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> strategies: [{</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> key: '这里是存储的名字，可以自定义，例如 user_data',</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> storage: localStorage,</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> paths: [], //通过 paths 指定要长久化的字段，其余的则不会进行长久化。</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> }]</span></div>
<div> <span style="color: rgba(0, 128, 0, 1)"> }</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> })</span></div>
<div> </div>
<div><span style="color: rgba(0, 128, 0, 1)"> 使用方式：</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> 在需要store的文件中引入对应的js文件即可，例如：</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> login.vue:</span>
<div>
<div><span style="color: rgba(0, 128, 0, 1)"> import { useUserStore } from '@/store/user'</span></div>
<div> <span style="color: rgba(0, 128, 0, 1)"> const userStore = useUserStore(); </span> <span style="color: rgba(255, 0, 0, 1)">// 注意这里也可以引入 storeToRefs 方法，然后进行解构，storeToRefs方法是pinia里面的，所以是从pinia中引入。</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> //登录方法中调用存储token的方法</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> login(){</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> //假设这里获取到了用户token，然后需要存储token</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> let token = 'xx';</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> useUserStore.setToken(token);</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> }</span></div>
<div> </div>
<div><span style="color: rgba(0, 128, 0, 1)">注意事项：</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> 1.Pinia不需要像Vuex一样使用modules分模块，Pinia可在store目录中直接定义对应模块就可以了。</span></div>
<div> </div>
<div><span style="color: rgba(0, 128, 0, 1)"><span style="color: rgba(0, 128, 0, 1)">pinia与vuex区别：<br></span></span><ol>
<li><span style="color: rgba(0, 128, 0, 1)">支持选项式api和组合式api写法</span></li>
<li><span style="color: rgba(0, 128, 0, 1)">pinia没有mutations，只有：state、getters、actions</span></li>
<li><span style="color: rgba(0, 128, 0, 1)">pinia分模块不需要modules（之前vuex分模块需要modules）</span></li>
<li><span style="color: rgba(0, 128, 0, 1)">TypeScript支持很好</span></li>
<li><span style="color: rgba(0, 128, 0, 1)">自动化代码拆分</span></li>
<li><span style="color: rgba(0, 128, 0, 1)">pinia体积更小（性能更好）</span></li>
</ol></div>
</div>
</div>
</div>
</div>
</div>
<p>6.安装eslint以及css预处理器sass安装</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">1. ts中使用 @ 符号引入， 需要在tsconfig.json文件中进行配置<br> skipLibCheck: true<br><br> "exclude": ["node_modules"]<br><br>2.安装eslint<br>npm install --save-dev eslint eslint-plugin-vue<br><br>3.创建 .eslintrc.js 文件<br></span></pre>
<div>
<div> <span style="color: rgba(0, 128, 0, 1)"> module.exports = {</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> root: true,</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> parseOptions: {</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> sourceType: 'module'</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> },</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> parser: 'vue-eslint-parser',</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> extends: [</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> 'plugin:vue/vue3-essential',</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> 'plugin:vue/vue3-strongly-recommended',</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> 'plugin:vue/vue3-recommended'</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> ],</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> env: {</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> browser: true,</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> node: true,</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> es6: true,</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> },</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> rules: {</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> 'no-console': 'off',</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> 'comma-dangle': </span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> }</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> }</span></div>
</div>
<pre><br><span style="color: rgba(0, 128, 0, 1)">安装sass:</span><br><span style="color: rgba(0, 128, 0, 1)">npm install -D sass sass-loader</span></pre>
</div>
<p>7. 安装 element-plus</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">npm install element-plus --save<br><br>然后再 main.ts 文件中引入</span></pre>
<div>
<div><span style="color: rgba(0, 128, 0, 1)"> import ElementPlus from 'element-plus'</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> import 'element-plus/dist/index.css'</span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> </span></div>
<div><span style="color: rgba(0, 128, 0, 1)"> app.use(ElementPlus) 即可;</span></div>
</div>
</div>
<p>8.vue3语法</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">setup 语法糖中，组件的使用方式：<br> 引入的组件可以直接使用，无需再通过components进行注册，并且无法指定当前组件的名字，他会自动以文件名为主，不用再写name属性了。<br><br>ref使用：<br> 定义： const xxx = ref('xx');<br> 作用： 定义一个响应式的数据。<br> js中操作，需要使用 xxx.value;<br> 模板中使用不需要 .value;</span></pre>
</div>
<p> 9. 兄弟组件bus.js传值</p>
<div class="cnblogs_code">
<p><span style="color: rgba(0, 128, 0, 1)">新建一个Bus.js来用于兄弟之间传值。</span></p>
<p><span style="color: rgba(0, 128, 0, 1)">Bus.js文件：</span></p>
<pre><span style="color: rgba(0, 128, 0, 1)"><code class="hljs language-javascript"><span class="hljs-keyword">import <span class="hljs-title class_">Vue <span class="hljs-keyword">from <span class="hljs-string">'vue';
<span class="hljs-keyword">export <span class="hljs-keyword">default <span class="hljs-keyword">new <span class="hljs-title class_">Vue;</span></span></span></span></span></span></span></span></code></span></pre>
<p><span style="color: rgba(0, 128, 0, 1)">通过bus.$emit("事件名称”,data) 发送</span></p>
<p><span style="color: rgba(0, 128, 0, 1)">通过bus.$on("事件名称"，(data)=>{</span></p>
<p><span style="color: rgba(0, 128, 0, 1)"> this. data = data </span></p>
<p><span style="color: rgba(0, 128, 0, 1)">})接收</span></p>
</div>
<p>10.axios二次封装以及api解耦</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 128, 0, 1)">下载安装axios: npm install axios -S<br>新建utils/request.js:<br><span class="hljs-keyword">import axios <span class="hljs-keyword">from <span class="hljs-string">'axios'; <br><span class="hljs-comment">//1. 创建axios对象 <br><span class="hljs-keyword">const service = axios.<span class="hljs-title function_">create({<br> <span class="hljs-attr">baseURL: <span class="hljs-keyword">import.<span class="hljs-property">meta.<span class="hljs-property">env.<span class="hljs-property">VITE_BASE_URL,<br></span></span></span></span></span> timeout: 5000<br>}); <br><span class="hljs-comment">//2. 请求拦截器 <br>service.<span class="hljs-property">interceptors.<span class="hljs-property">request.<span class="hljs-title function_">use(<span class="hljs-function"><span class="hljs-params">config => { <br><span class="hljs-keyword"> return config; <br>}, <span class="hljs-function"><span class="hljs-params">error => { <br><span class="hljs-title class_"> Promise.<span class="hljs-title function_">reject(error); <br>});<br> <span class="hljs-comment">//3. 响应拦截器 <br> service.<span class="hljs-property">interceptors.<span class="hljs-property">response.<span class="hljs-title function_">use(<span class="hljs-function"><span class="hljs-params">response => { <br><span class="hljs-comment"> //判断code码 <br><span class="hljs-keyword"> return response.<span class="hljs-property">data; <br> },<span class="hljs-function"><span class="hljs-params">error => { <br><span class="hljs-keyword"> return <span class="hljs-title class_">Promise.<span class="hljs-title function_">reject(error); <br>}); <br><span class="hljs-keyword">export <span class="hljs-keyword">default service;<br><br>api解耦文件：<br>创建api文件：<br><span class="hljs-keyword">import request <span class="hljs-keyword">from <span class="hljs-string">'@/utils/request' <br><span class="hljs-keyword">export <span class="hljs-keyword">function <span class="hljs-title function_">testApi(<span class="hljs-params"> data ){ <br><span class="hljs-keyword"> return <span class="hljs-title function_">request({ <br><span class="hljs-attr"> url:<span class="hljs-string">'/api/xxx', <br><span class="hljs-attr"> method:<span class="hljs-string">"post", <br> data <br> }) <br>}</span></span></span></span></span></span></span></span></span></span></span></span></span><br></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></pre>
</div>
<p> </p>
</div>
<div id="MySignature" role="contentinfo">
如果快乐太难，那祝你平安。<br><br>
来源：https://www.cnblogs.com/sunnyeve/p/16577158.html
頁:
[1]