1 vue.js添加到项目的三种方式
在页面上以CDN package的形式导入
使用npm安装它
使用官方的cli来构建一个项目，它为现代前端工作流程提供了功能齐备的构建设置(例如，热加载，保存时的提示等)
CDN导入
学习的话一般用第一种，通过页面上用CDN package的形式导入，就像我们导入ztree.js或者jquery.js一样当一个新的js的包来使用，所谓的CDN就是联网情况下从官方请求最新版本js，也可以提前下载到本地，在本地导入使用。下面是一个CDN导入的案例
<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<scriptsrc="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>
</head>
<body>
<divid="app">
<p>{{ title }}</p>
<p>{{ sayHello() }}</p>
</div>
<script>
newVue({
el:"#app",
data:{
title:"vue",
args1:"hi!",
age:18,
flag:true
},
methods:{
sayHello:function(){
return"hello! ";
}
}
});
</script>
</body>
</html>
使用npm安装
使用vue构建大型应用时推荐使用npm安装，npm能很好的和诸如webpack或Browserify模块打包器配合使用，同时vue也提供配套工具来开发单文件组件
npm install vue@next
命令行工具cli
vue提供一个官方的cli，为单页面应用快速搭建繁杂的脚手架。它为现代前端工作流提供了batteries-include的构件配置。只需要几分钟的时间就可以运行并带有热重载，保存时lint校验，以及生产环境可用的构建版本。
cli工具假定用户对node.js和相关的构建工具有一定程度的了解。如果你是新手，我们强烈建议在不用构建工具的情况下通读指南，在熟悉vue本身后再使用cli。
对于vue3，你应该使用npm上可用的vue cli v4.5作为@vue/cli@next。要升级，你应该需要全局重新安装最新版本的@vue/cli。
yarn global add @vue/cli@next
npm install -g @vue/cli@next
vite构建
vite是一个web开发构建工具，由于其原生es模块导入方法，它允许快速提供代码。通过在终端中运行以下命令，可以使用vite快速构建vue项目，使用npm:
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev
或者yarn：
yarn create vite-app <project-name>
cd <project-name>
yarn
yarn dev
不同构建版本差异
在npm包的dist/目录，你将会找到很多不同的Vue.js构建版本。说人话就是在HTML直接引用vue的包、在node.js上运行vue的引入的vue的包、。这里列出了它们之间的差别:
vue(.runtime).global(.prod).js
使用cdn或没有构建工具的情况下用这个，意思是在html直接引入vue的时候需要导入的js文件:
若要通过浏览器中的<script src="...">直接使用，则暴露Vue全局
浏览器内模板编译:
vue.global.js是包含编译器和运行时的完整构建，因此它支持动态编译模板。
vue.runtime.global.js只包含运行时，并且需要在构建步骤期间预编译模板。
内联所有vue核心内部包-即:它是一个单文件，不依赖于其他文件，这意味着你必须导入此文件和此文件中的所有
内容，以确保获得相同的代码实例。
包含硬编码的prod/dev分支，并且prod构建是预先缩小的。使用.prod.js用于生产的文件。
全局打包不是umd构建的，它们被打包成IIFEs，并且仅用于通过<script src="...">直接使用。
umd全称是Universal Module Definition，叫做通用模块定义，它的作用是一套代码，同时支持：浏览器直接用 + require 用 + import 用
也就是说在写代码时可以用下面四种方式使用umd构建的包，vue(.runtime).global(.prod).js这个就不是umd构建的包，只能<script src="">方式引用：
<script src="">你用
require()你用
import你用 webpack/vite 构建
vue(.runtime).esm-browser(.prod).js
用于通过原生es模块导入使用，在浏览器中通过<script type="module">，与全局构建共享相同的运行时编译，依赖内联和硬编码的prod/dev行为。这个意思是这个构建版本的js只能用import引入。不能用commonJS规范的require，也不能用<script src="">这种方式引入。
<scripttype="module">
import { createApp } from'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
//或者本地这么引入：import { createApp } from './vue.esm-browser.js'
createApp({
template: '<div>Hello ESM</div>'
}).mount('#app')
</script>
<divid="app"></div>
vue(.runtime).esm-bundler.js
使用构建工具像webpack，rollup和parcel，意思是用构建工具像webpack打包的话要引入这个版本的js
todo:将prod/de分支留给process.env.NODE_ENV guards(需要更换构建工具)，意思是将来要用环境变量控制引入哪个js不是代码写死，我看的文档比较老，现代 webpack 5 可以自动根据 NODE_ENV 切换 Vue 的开发 / 生产版本。
像下面这样就是写死的
// 开发环境
import { createApp } from 'vue/dist/vue.runtime.esm-bundler.js'
// 生产环境
import { createApp } from 'vue/dist/vue.runtime.esm-bundler.prod.js'
这种就是改环境变量就行了
import { createApp } from 'vue'
// 构建工具自动根据 NODE_ENV 替换代码
package.json能看到引入的是vue.runtime.esm-bundler.js
"module": "dist/vue.runtime.esm-bundler.js"
不提供最小化版本(捆绑后与其余代码一起完成)，这个意思就是这个文件本身不提供压缩版本，webpack会把这个文件和你写的js一起打包压缩。
import依赖(例如:@vue/runtime-core，@vue/runtime-compiler)导入的依赖项也是esm bundler构建，并将依次导入其依赖项(例如@vue/runtime-core imports @vue/reactivity)，这意味着你可以单独安装/导入这些依赖，而不会导致这些依赖项的不同实例。
这个意思是@vue/runtime-core这个包你导入了一份，这个包内部会导入
@vue/runtime-reactivity，但不会造成重复、多实例、重复打包。就是说你在一个文件同时导入@vue/runtime-core、@vue/runtime-reactivity并不会造成reactivity这个包有两个实例。
但你必须确保他们都为同一版本vue.runtime.esm-bundler.js仅运行时，并要求所有模板都要预先编译，这是打包工具的默认入口(通过package.json中的module字段)，因为在使用bundler时，模板通常是预先编译的(例如:在*.vue文件中)，你需要将打包工具配置vue别名到这个文件用于服务端渲染。
这个意思是vue.runtime.esm-bundler.js这个文件只有运行时的，不能识别模版：
template: "<div>hello</div>"
这种语法，得提前把模版编译好再打包，像app.vue文件会被vue-loader /vite 编译好。最后一句意思是在项目里写import {createApp} from 'vue'都要指向package.json配置的vue.runtime.esm-bundler.js，因为服务端一般都是在node.js上跑的，webpack 在打包服务端代码时，解析规则不一样，可能不会读Vue 的 package.json，读错其他入口，比如："main": "dist/vue.commonjs.js" // 有可能带 compiler。不指定的话可能加载到带编译器的版本，因为带编译器的版本会用到document、div、navigator这些浏览器api，node.js没有就会报错：document is not defined。
vue.cjs(.prod).js:
用于node.js通过require()进行服务器端渲染。如果你将应用程序与带有target:'node'的webpack打包在一起，并正确的将vue外部化，将加载此构建。dev/prod文件是预构建的，但是根据process.env.NODE_env会自动需要相应的文件。当使用vue-loader时，*.vue文件中的模板在生成预编译为Javascript，在最终的打包器中并不需要编译器，因此可以只使用运行时构建。
2 Vue3项目搭建
安装node.js
node.js是js的服务端运行环境，npm包管理需要先安装node.js才能用npm安装其他构建工具。
打开这个网址：
https://nodejs.org/
页面上会显示两个按钮：
LTS（长期稳定版） → 点这个！
Current（最新版）→ 不推荐
配置镜像
npm config set registry https://registry.npmmirror.com
我两年前安装过一次，就没有装了，结果后面有个坑。
创建项目
npm create vite@latest my-vue3-app表示使用vite构建工具创建名字叫my-vue3-app的vue3项目，-- --template vue前一个--是分隔符，告诉 npm：“后面的参数不是给我 npm 的，是传给里面的工具（Vite） 的”，--template vue是传给vite的参数，作用是直接选择vue模版。
npm create vite@latest my-vue3-app -- --template vue
cd my-vue3-app
npm install
npm run dev
记录一下报错
说是我的npm 镜像源证书过期了，重新更新下镜像源
D:\vue3_code> npm create vite@latest my-vue3-app -- --template vue
npm ERR! code CERT_HAS_EXPIRED
npm ERR! errno CERT_HAS_EXPIRED
npm ERR! request to https://registry.npm.taobao.org/create-vite failed, reason: certificate has expired
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\lenovo\AppData\Roaming\npm-cache\_logs\2026-03-26T04_29_37_033Z-debug.log
Install for [ 'create-vite@latest' ] failed with code 1
PS D:\vue3_code> ^C
D:\vue3_code> npm config set registry https://registry.npmmirror.com
还是报错了，ai说是node.js版本太老，版本低于15就会报错
SyntaxError: Unexpected token '||='
at Loader.moduleStrategy (internal/modules/esm/translators.js:145:18)
官网https://nodejs.org/下载最新版本再试试，已经正常创建vue3项目了，说需要下载create-vite@9.0.3，直接输入y，接着用npm下载相关依赖，
D:\vue3_code> npm create vite@latest my-vue3-app -- --template vue
Need to install the following packages:
create-vite@9.0.3
Ok to proceed? (y) y
> npx
> create-vite my-vue3-app --template vue
│
◇ Install with npm and start now?
│ Yes
│
◇ Scaffolding project in D:\vue3_code\my-vue3-app...
│
◇ Installing dependencies with npm...
然后可以看到帮助命令，r是重启，按q退出。项目已经起来了
➜ press h + enter to show help
h
Shortcuts
press r + enter to restart the server
press u + enter to show server url
press o + enter to open in browser
press c + enter to clear console
press q + enter to quit
关于vite
vite是vue的作者开发的构建工具，现在创建vue3项目基本都是使用vite，它的作用是把vue、scss等文件转成浏览器能识别的js、html、css。vite在代码更新时不会重新打包整个文件，因为vite是基于ES，每个文件都是独立的模块。速度比过去的webpack /vue-cli要快不少。而且vite内置了loader，不需要再自己引入。过去要引入这些
// webpack.config.js （以前超麻烦）
module.exports = {
module: {
rules: [
{ test: /\.vue$/, use: 'vue-loader' }, // 翻译 .vue
{ test: /\.js$/, use: 'babel-loader' }, // 翻译 JS 新语法
{ test: /\.css$/, use: ['style-loader','css-loader'] }, // 翻译 CSS
{ test: /\.scss$/, use: 'sass-loader' } // 翻译 SCSS
]
}
}
浏览器怎么知道代码更新了？
Vite 在开发时，会自动向页面注入一个小客户端脚本。
这个脚本作用：
一直和 Vite 服务器保持连接（WebSocket）
服务器一发现文件变化
立刻推送消息给浏览器
浏览器精准热替换那个模块
