Web前端开发篇（1）：vue3入门指南

1 前提准备

构建vue项目有多种方式，推荐使用NPM方法，需要用到npm和node，新版本的node已经集成了npm，所以只需下载node即可。

首先要下载node，最好在15.0以上：Node.js下载，按照流程傻瓜式安装即可，使用node -v验证安装。

其次要安装cnpm，由于npm的资源为国外资源，经常导致安装依赖速度过慢或失败，所以需要安装npm的国内镜像：

npm install -g cnpm --registry=http://registry.npm.taobao.org

2 构建&运行项目

进入到想要存放项目位置的命令行，输入：

npm init vue@latest

等待片刻后，需要填入项目所需的必要信息：

进入到项目文件，构建并运行项目：

cd my-vue
cnpm install
npm run dev

打开浏览器访问http://localhost:5173/，出现以下界面即为成功。

 安装setup语法糖扩展安装，安装此扩展可以更方便的使用setup语法糖：

cnpm i vite-plugin-vue-setup-extend -D

安装完成后，需要修改项目下的vite.config.ts配置文件，将安装的扩展引入并调用：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    VueSetupExtend()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

3 项目结构

注：js为vue2，ts为vue3 

.vscode            --- VSCode工具的配置文件夹
node_modules       --- Vue项目的运行依赖文件夹
public             --- 资源文件夹（浏览器图标）
src                --- 源码文件夹
.gitignore         --- git忽略文件
index.html         --- 入口HTML文件
package.json       --- 信息描述文件
README.md          --- 注释文件
vite.config.js     --- Vue配置文件

4 Ts与Js的区别

具体本质区别可以参考官网描述，以一个例子对比两者写法上的区别：

ts：

<template>
  <h1 class="home">首页</h1>
  <p>{{name}}</p>
  <p>{{age}}</p>
  <button @click="addAge">增加年龄</button>
</template>

<script setup lang="ts" home="home1">
  // 数据
  let name =  "张三"
  let age = 18
  // 方法
  function addAge(){
    age += 1
  }
</script>

js：

<template>
  <h1 class="class">首页</h1>
  <p>{{name}}</p>
  <p>{{age}}</p>
  <button @click="addAge">增加年龄</button>
</template>

<script lang="js">
export default {
  // 数据
  data(){
    return{
      name: "张三",
      age: 18
    }
  },
  methods:{
    addAge(){
      this.age+=1
    }
  }
}

注意1：在同一个文件中，ts与js两者可以并存，而且js可以通过this访问ts中的数据，但是反之不可以。

注意2：上面ts中的addAge可以修改age数据，但是页面中并不会更改。原因是age并不是响应式数据，如何定义为响应式数据，需要参考下一篇：