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并不是响应式数据，如何定义为响应式数据，需要参考下一篇：