创建vite的vue项目

创建项目

使用 NPM：npm init vite@latest
使用 Yarn：yarn create vite

• 创建项目名字
  

• 选择模板
  

  • vanilla：原生js，没有任何框架集成
  • vue：vue3框架，只支持vue3
  • react：react框架
  • preact：轻量化react框架
  • lit-element：轻量级web组件
  • svelte：svelte框架

• 选择js还是ts
  

引入依赖

• 先进入项目

  cd vite-test
  1

• 安装依赖

  npm install
  1

启动项目

npm run dev
1

使用vue-router

• 安装

  npm install vue-router@4 -S
  1

• 在src目录下新建router/index.ts并编写一下代码

  import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
  
  const routes: Array<RouteRecordRaw> = [
      {
          path: '/',
          component: () => import('../components/HelloWorld.vue')
      }
  ]
  
  const router = createRouter({
  // createWebHashHistory hash 路由
  // createWebHistory history 路由
  // createMemoryHistory 带缓存 history 路由
      history: createWebHistory(),
      routes
  })
  
  export default router
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18

• 修改app.vue

  <template>
    <router-view />
  template>
  
  <style scoped>
  style>
  1
  2
  3
  4
  5
  6

• 然后修改main.ts文件为：

  import { createApp } from 'vue'
  import App from './App.vue'
  import router from './router'
  createApp(App).use(router).mount('#app')
  1
  2
  3
  4

使用vuex

• 安装

  npm install vuex@next -S
  1

• src目录下新建store/index.ts并编写一下代码

  import { createStore } from 'vuex'
  const store = createStore({
      state: {
          userInfo: {
              name:'myName'
          }
      },
      mutations: {
          getUserInfo (state:any, name:string|number) {
              state.userInfo.name = name
          }
      },
      actions: {
          asyncGetUserInfo (context:any) {
              setTimeout(() => {
                  context.commit("getUserInfo", +new Date() + 'action')
              },2000)
          }
      },
      getters: {
          userInfoGetter (state:any) {
              return state.userInfo.name
          }
      }
  })
  
  export default store;
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27

• 然后修改main.ts文件为：

  import { createApp } from 'vue'
  import App from './App.vue'
  import router from './router'
  import store from "./store";
  createApp(App).use(router).use(store).mount('#app')
  1
  2
  3
  4
  5

使用sass

• 安装

  npm run sass --save-dev
  1

• 使用（安装后直接就可以用）

  <style lang="scss" scoped>
  div {
    color: red;
    span {
      font-size: 60px;
    }
  }
  style>
  1
  2
  3
  4
  5
  6
  7
  8