Vite and npm ways to build vue3 scaffolding

Table of contents

Install the latest version of vue-cli of vue3

Uninstall the old version

vue-cli2 卸载    npm uninstall -g vue-cli
vue-cli3 卸载    npm uninstall -g @vue/cli

Install new version @vue/cli

vue-cli3 安装最新版   npm install -g @vue/cli
vue-cli3 安装指定版   npm install -g @vue/[email protected]

//检查vue版本号
vue -V

Build the latest scaffolding for vue3

Web way to build

Consistent with the steps of the old version, you can select configuration items during installation

npm create myapp

Vite way to build

initialize a project

npm init vite-app myapp
或
yarn create vite-app myapp

install dependencies

yarn install 
或
yarn 
或
npm i

Startup project

yarn dev 
或
npm run dev

This project is just a basic structure, there is no other configuration, you must add the configuration yourself

vite configuration items

Configure TS

1 installation

yarn add typescript -D

2 initialization

//执行命令 初始化 tsconfig.json 
npx tsc --init

3 Modify main.js to main.ts to <script> <script lang="ts">

4 Configure ts to recognize vue files, add shim.d.ts files in the project root directory

declare module "*.vue" {
  import { Component } from "vue";
  const component: Component;
  export default component;
}

Configure vue-router

1 installation

yarn add [email protected]
// or
yarn add vue-router@next

2 configure vue-router

Create a new router directory under the project src directory , then add the index.ts file and add the following content

import {createRouter, createWebHashHistory} from 'vue-router'
const routes:any = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue')
  }
]
// Vue-router新版本中，需要使用createRouter来创建路由
export default  createRouter({
  // 指定路由的模式,此处使用的是hash模式
  history: createWebHashHistory(),
  routes // short for `routes: routes`
})

3 Introduce the router into main.ts and modify the main.ts file

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

// import router 后创建并挂载根实例。
const 
// 确保 t_use_  实例来创建router, 将路由插件安装到 app 中
createApp(App).use(router).mount('#app')

Configure vuex

1 installation

yarn add vuex@4
//或者
yarn add vuex@next

2 Create a new store directory under the project src directory , add the index.ts file, and add the following content

import { createStore } from 'vuex'

interface State {
  userName: string
}
export default createStore({
  state(): State {
    return {
      userName: "vuex",
    };
  },
  mutations:{ },
  actions: { },
  modules: { },
  plugins: [ ]

});