pycharm 创建vue并实现简易路由功能

本文介绍: 使用 pycharm 创建 vue 项目时，选择 vite来创建vue。因为vite是专门针对 vue 开发的打包框架，以前使用 vue–cli来创建vue 项目，就是使用的webpack来进行打包的，现在有了vite，就尽量使用 vite来创建vue 项目。在pycharm中新建项目，选择 vite，再在右边模板里，选择 vue，这样就是使用最新的vite 版本，来创建vue 项目了。vue 官网上有简易的路由代码。这样不适用路由插件，就实现了路由功能。默认的启动配置，自动填上了运行命令。点击启动，项目就开始运行了。

使用 pycharm创建v ue 项目时，选择 vite来创建v ue。为什么使用 vite？因为vite是专门针对 v ue 开发的打包框架，以前使用 v ue–cli来创建vue 项目，就是使用的webpack来进行打包的，现在有了vi te，就尽量使用vi te来创建vue项目。

在pycharm中新建项目，选择 vite，再在右边模板里，选择vue，这样就是使用最新的vite版本，来创建vue项目了。

默认的启动配置，自动填上了运行命令。

点击启动，项目就开始运行了。

<script setup&gt;

</script&gt;

<template&gt;
<h1&gt;aaaaaa</h1&gt;
</template&gt;

<style scoped&gt;

</style>

<script setup>
import {ref, computed} from 'vue'
import HelloWorld from './components/HelloWorld.vue'
import A from './components/a.vue'
import B from './components/b.vue'

const routes = {
  '/': A,
  '/about': B
}
const currentPath = ref(window.location.hash)
window.addEventListener('hashchange', () => {
  currentPath.value = window.location.hash
})
const currentView = computed(() => {
  return routes[currentPath.value.slice(1) || '/'] || HelloWorld
})
</script>

<template>
  <div>
    <a href="https://vitejs.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>


  <a href="#/">Home</a> |
  <a href="#/about">About</a> |
  <a href="#/HelloWorld">HelloWorld</a>
  <component :is="currentView"/>

</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>