Vue3+TypeScript基础应用

Vue-cli构建vue3

安装vue-cli

npm install -g @vue/cli
yarn global add @vue/cli
查看安装版本：vue --version
如果低于4.5.6可以更新一下，老版本没有创建vue3的选项

使用命令行构建

输入vue create vuedemo
会跳出三个菜单

? Please pick a preset: (Use arrow keys)            //请选择预选项
> Default ([Vue 2] babel, eslint)                   //使用Vue2默认模板进行创建
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)   //使用Vue3默认模板进行创建
  Manually select features                          //手动选择(自定义)的意思

因为要使用TypeScript进行开发，所以选择第三项

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
 ( ) CSS Pre-processors             //CSS预处理器
 (*) Linter / Formatter             //格式化工具
 ( ) Unit Testing                   //单元测试
 ( ) E2E Testing                    //E2E测试

这里需要多选一个TypeScript的选项(按空格)，然后再按回车进入下一层

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 2.x
  3.x (Preview)

这里要选择 3.x 的版本

Use class-style component syntax?

不使用class-style可以选n

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)

使用TypeScript和Babel的形式编译 JSX的选n

? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
  TSLint (deprecated)

练习一般默认就好，其他情况根据需要选择

? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save         //保存的时候进行Lint
 ( ) Lint and fix on commit   //需要帮你进行fix（修理），这项我们不进行选择

选一

Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files

选择配置文件是单独存放还是直接存放在package.json，这里选择单独存放

Save thisas a preset for future projects? (y/N)

是否保存刚才的配置，下次继续使用。根据需要选择

? Pick the package manager to use when installing dependencies:
> Use Yarn
  Use NPM

如果你同时安装了npm和yarn，它还会最后询问选哪个，根据习惯选择

最后运行项目即可

使用图形界面构建

命令：vue ui

访问http://localhost:80

创建 → 在此处创建新项目 → 输入项目名 → 选择yarn或npm→ 下一步

选择手动

根据自己的项目来进行配置

根据需要选择是否保存这个配置

这时候终端就会开始构建项目了。出现该界面说明构建完成

项目初始结构和重要文件

|-node_modules       -- 所有的项目依赖包都放在这个目录下
|-public             -- 公共文件夹
---|favicon.ico      -- 网站的显示图标
---|index.html       -- 入口的html文件
|-src                -- 源文件目录，编写的代码基本都在这个目录下
---|assets           -- 放置静态文件的目录，比如logo.pn就放在这里
---|components       -- Vue的组件文件，自定义的组件都会放到这
---|App.vue          -- 根组件，这个在Vue2中也有
---|main.ts          -- 入口文件，因为采用了TypeScript所以是ts结尾
---|shims-vue.d.ts   -- 类文件(也叫定义文件)，因为.vue结尾的文件在ts中不认可，所以要有定义文件
|-.browserslistrc    -- 在不同前端工具之间公用目标浏览器和node版本的配置文件，作用是设置兼容性
|-.eslintrc.js       -- Eslint的配置文件，不用作过多介绍
|-.gitignore         -- 用来配置那些文件不归git管理
|-package.json       -- 命令配置和包管理文件
|-README.md          -- 项目的说明文件，使用markdown语法进行编写
|-tsconfig.json      -- 关于TypoScript的配置文件
|-yarn.lock          -- 使用yarn后自动生成的文件，由Yarn管理，安装yarn包时的重要信息存储到yarn.lock文件中

package.json 中的三条命令

{
   
  //----
  "scripts": {
   
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  //----
}

• serve : 在开发时用于查看效果的命令，视频中演示看一下效果
• build : 打包打码，一般用于生产环境中使用
• lint : 检查代码中的编写规范

dependencies和devDependencies

• 开发环境：编写代码、测试代码、修改 Bug的环境，也就说这些代码没有上线
• 生产环境：就是代码已经上线，放到了正式的服务器上的代码

入口文件main.ts

import {
    createApp } from "vue"; // 引入vue文件，并导出`createApp`
import App from "./App.vue"; // 引入自定义组件，你在页面上看的东西基本都在这个组件里

createApp(App).mount("#app"); // 把App挂载到#app节点上，在public目录下的index.html找节点

Vue3

setup()和 ref()函数

App.vue

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <div>
    <h2>hello vue3</h2>
    <div>请选择</div>
  </div>
  <div>
    <button
      v-for="(item, index) in temps"
      v-bind:key="index"
      @click="selectTempFun(index)"
    >
      {
   {
    index }} : {
   {
    item }}
    </button>
  </div>
  <div>你选择了【{
   {
    selectTemp }}】</div>
</template>

<script lang="ts">
import {
    defineComponent, ref } from "vue";
export default defineComponent({
   
  name: "App",
  setup() {
   
    const temps = ref(["vue2", "vue3"]);
    const selectTemp = ref("");
    const selectTempFunc = (index: number) => {
   
      selectTemp.value = temps.value[index];
    };
    //因为在模板中这些变量和方法都需要条用，所以需要return出去。
    return {
   
      temps,
      selectTemp,
      selectTempFunc,
    };
  },
});
</script>

• setup 函数的用法，可以代替 Vue2 中的 date 和 methods 属性，直接把逻辑写在 setup 里就可以
• ref 是一个神奇的函数，注意要使用template中的变量，必须用ref包装
• return出去的数据和方法，在模板中才可以使用，这样可以精准的控制暴露的变量和方法

reactive()函数

上面的代码所有的变量和方法都混淆在一起，且在使用setup中要改变和读取一个值还要加上value