03-Vue3环境

vuejs官网open in new window

1. 创建新项目

➜  vue3# pnpm create vue@latest

Vue.js - The Progressive JavaScript Framework

✔ Project name: … vue3
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? › Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in /Users/listao/tmp/vue3/vue3...

Done. Now run:

  cd vue3
  pnpm install
  pnpm format
  pnpm dev

2. 项目目录结构

node_modules # 项目的依赖

├── public # 静态资源公共文件

│ ├── favicon.ico # favicon图标

│ └── index.html # html模板

├── src # 源代码

│ ├── assets # 静态文件

│ └── components # 全局公用组件

│ └── App.vue # 入口组件 (页面)

│ └── main.ts # 入口文件

│ └── shims-vue.d.ts # 由于 TS 默认并不支持 .vue 后缀的文件。在 vue 项目中，引入时需要创建一个 vue-shim.d.ts 文件，告诉 TS *.vue 后缀的文件可以交给 vue 模块来处理

├── .browserslistrc  # 浏览器兼容相关

├── eslintrc.js # esLint 配置文件

├── .gitignore # Git会忽略的文件名设置

├── package.json

├── README.md

├── tsconfig.json # TS 配置文件

3. 项目源码分析

import './assets/main.css'

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

const app = createApp(App)

app.use(router)

app.mount('#app')






 



 

Vue 提供了一个全局 API createApp()。每个 Vue 应用都是通过 createApp() 创建一个新的应用实例。传递给 createApp() 的选项用于配置根组件。当挂载应用时，该组件被用作渲染的起点

WGZqNU1GVXdIdVJQbWc4bzVvbFdldmowTk44RnhubGZNVVhwZ1cwPQ==

在 <script> 上加上 lang="ts"，webpack 将这段代码识别为 TS 而非 JS

<script setup lang="ts">
import {RouterLink, RouterView} from 'vue-router'
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <header>
    <img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125"/>

    <div class="wrapper">
      <HelloWorld msg="You did it!"/>

      <nav>
        <RouterLink to="/">Home</RouterLink>
        <RouterLink to="/about">About</RouterLink>
      </nav>
    </div>
  </header>

  <RouterView/>
</template>

<style scoped>

</style>
 









 














<script setup lang="ts">
defineProps<{
  msg: string;
}>();
</script>

<template>
  <div class="greetings">
    <h1 class="green">{{ msg }}</h1>
    <h3>
      You’ve successfully created a project with
      <a href="https://vite.dev/" target="_blank" rel="noopener">Vite</a> +
      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
      What's next?
    </h3>
  </div>
</template>

<style scoped>

</style>