Vue3+Ts的起步和使用

1. 创建项目

# 创建项目
vue create 项目名

# 选择手动选择
Vuw CLI V4.5.13
  ?Please pick a preseti
  coderwhy ([Vue 3] babel)
  Default ([Vue 2] babel, eslint)
  Default(Vue 3) ([Vue 3] babel, eslint)  
  Manually select features  #手动选择

# 下一步
Vue CLI V4.5.13
  ? Please pick a preset: Manually select features? Check the features needed for your project:
  Choose Vue version vue版本选择Babel  #预处理器
  TypeScript  #ts
  O Progressive Web App (PWA) Support  #PWA
  Router   #路由
  Vuex   #vuex
  CSS Pre-processorscss  #预处理器
  Linter / Formattereslint #代码检查
  O Unit Testing #单元测试
  E2E Testing #e2e测试

# 选择Vue3

# 选择TypeScript

# 选择Router

# 选择Vuex

# 选择CSS预处理器

# 下一步
# vue 版本选择
Vue CLI V4.5.13
  ? Please pick a preset: Manually select features
  ? Check the features needed for your project: Choose Vue version, Babel, TS, CSS
  Pre-processors， Linter
  ? Choose a version of Vue.js that you want to start the project with (Use arrowkeys)
  2.x
  3.x

# 下一步
# 选择预处理器 选择css 处理器 个人喜欢用less 看自己选择
Vue CLI V4.5.13
  Choose a version of Vue.js that you want to start the project with 3.x
  Use class-style component syntax? No #使用class 的component
  Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills，transpiling JSX)? Yes  #是否使用bable 来处理 typescript
  Pick a CSS pre-processor ((PostCSS，Autoprefixer and CSS Modules are supportedby default):
  Sass/SCSS (with dart-sass
  Sass/SCSS(with node-sass
  Less #选择less 预处理器
  Stylus

  Pick a linter / formatter config:Prettier #选择代码检查工具 如果刚刚选择了 eslint 这里就选择prettier

  Pick additional lint features: Lint on save #保存时检查代码

  #是否将一些bable eslint 等配置文件放在一个配置文件管理还是分开
  Where do you prefer placing config for Babel,ESLint，etc.? (Use arrow keys)
  In dedicated config files #分开
  In package.json  #放在同一个

  Save this as a preset for future projects? No #是否保存为一个预设
  # 是否保存你刚刚选择的喜好为预设
  # 如果是 下一步就取一个预设名字
  # 如果不是 就直接开始安装啦

2. 项目结构

├── README.md
├── babel.config.js
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── src
│   ├── App.vue
│   ├── assets
│   │   └── logo.png
│   ├── components
│   │   └── HelloWorld.vue
│   ├── main.ts
│   ├── router
│   │   └── index.ts
│   ├── shims-vue.d.ts
│   ├── store
│   │   └── index.ts
│   └── views
│       └── Home.vue
├── tsconfig.json
└── vue.config.js

3. vue.config 配置

const path = require('path')  // 引入path模块

module.exports = {
  // 1.配置方式一：CLI提供的属性
  outputDir: 'dist',  // 打包的目录
  // 2.配置方式二：和webpack属性完全一致，最后会进行合并
  // configureWebpack: {
  //   resolve: {
  //     alias: {
  //       components: '@/components', // 这样配置后 @ 可以指向 src/components 目录
  //     }
  //   }
  // }
  // configureWebpack:(config) => {
  //   config.reslove.alias = {
  //     '@': path.resolve(__dirname, 'src'), // 这样配置后 @ 可以指向 src 目录
  //     // 'components': path.resolve(__dirname, 'src/components'), // 这样配置后 @ 可以指向 src/components 目录
  //     components: '@/components', // 这样配置后 @ 可以指向 src/components 目录
  //   }
  // },
  // 3.配置方式三：是一个函数，会接收一个基于 webpack-chain 的 ChainableConfig 实例
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', path.resolve(__dirname, 'src')) // 这样配置后 @ 可以指向 src 目录
      .set('components', '@/components') // 这样配置后 @ 可以指向 src/components 目录
  }
}

4. 路由配置

//  router/index.ts
import { createRouter , createWebHashHistory} from "vue-router";

// type 表示导入类型，不是导入值
import type { RouteRecordRaw } from "vue-router"; // 路由规则类型

// 路由规则 RouteRecordRaw[] 数组类型
const routes:RouteRecordRaw[] = [
  {
    path: "/",
    redirect: "/main",
  },
  {
    path: "/main",
    component: () => import("@/views/main/main.vue"),
  },
  {
    path: "/login",
    component: () => import("@/views/login/login.vue"),
  },
];

// 创建路由
const router = createRouter({
  // 路由规则
  routes,
  // 路由模式
  history: createWebHashHistory(),
}); 


// 导出路由
export default router;


// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(router) // 注册路由
app.mount('#app') // 挂载到 #app

5. vuex 配置

// store/index.ts
import { createStore } from "vuex";

// 创建一个新的 store 实例
const store =  createStore({
  // 定义状态(state)的类型
  state: {
    name: "coderlzp",
    count: 0,
  },
  // 定义改变状态的方法
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  // 定义异步改变状态的方法
  actions: {
    increment(context) {
      context.commit("increment");
    },
  },
  // 定义状态的派生值
  getters: {
    doubleCount(state) {
      return state.count * 2;
    }
  },
  // 定义模块
  modules: {},
});

// 导出 store 实例
export default store;

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

const app = createApp(App)
app.use(router) // 注册路由
app.use(store) // 注册 store
app.mount('#app') // 挂载到 #app