使用vite开启vue3的开发之旅

1、npm install create-vite-app -g

2、npm create-vite-app vite

3、cd vite

4、npm install

5、npm run dev

安装vue-router使用命令行

npm i vue-router@next

安装vuex使用命令行

npm i vuex@next

安装sass使用命令行

npm i sass --save-dev

可以在项目根目录下创建 vite.config.js 配置 Vite（类似vue.config.js）

module.exports = {
  // 导入别名
  // 这些条目可以是精确的请求->请求映射*（精确，无通配符语法）
  // 也可以是请求路径-> fs目录映射。 *使用目录映射时
  // 键**必须以斜杠开头和结尾**
  alias: {
    // ‘react‘: ‘@pika/react‘,
    // ‘react-dom‘: ‘@pika/react-dom‘
    // ‘/@foo/‘: path.resolve(__dirname, ‘some-special-dir‘),
  },
  // 配置Dep优化行为
  optimizeDeps: {
    // exclude: [‘dep-a‘, ‘dep-b‘],
  },
  // 转换Vue自定义块的功能。
  vueCustomBlockTransforms: {
    // i18n: src => `export default Comp => { ... }`,
  },
  // 为开发服务器配置自定义代理规则。
  proxy: {
    // proxy: {
    //   ‘/foo‘: ‘http://localhost:4567/foo‘,
    //   ‘/api‘: {
    //     target: ‘http://jsonplaceholder.typicode.com‘,
    //     changeOrigin: true,
    //     rewrite: path => path.replace(/^\/api/, ‘‘),
    //   },
    // },
  },
  // ...
}

vue-router使用：（src/router/index.js）

import {createRouter, createWebHistory} from 'vue-router'
import Home from '../components/home/Home.vue'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // route -> routes
    {
      path: '/',
      name: 'home',
      component: Home,
    },
    {
      path: '/cards',
      name: 'cards',
　　　 component: () => import(/* webpackChunkName: 'Card' */ '../components/cards/Cards.vue'),
　　},
　],
})

export default router

main.js做相应改变

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import store from './store'
import router from './router'

const app = createApp(App)

app.use(store)
app.use(router)
app.mount('#app')