vue 安装使用

本地安装使用

前提条件：需要已经安装 nodejs 16.0+。

# 查看本机nodejs 版本
node -v

在本地搭建 Vue 单页应用。创建的项目将使用基于Vite的构建设置，并允许我们使用 Vue 的单文件组件(SFC)。

npm init vue@latest

这一指令将会安装并执行create-vue，它是 Vue 官方的项目脚手架工具。

Vite 官网：https://vitejs.cn
Vite 是一个 web 开发构建工具，由于其原生 ES 模块导入方法，它允许快速提供代码。

您将看到一些可选功能的提示，例如 TypeScript 和测试支持：

✔ Project name: … your-project-name
✔ 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 Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formating? … No / Yes

Scaffolding project in ./your-project-name...
Done.

如果启动您的项目选项，请暂时No选择返回车辆进行创建。

cd your-project-name

npm install
npm run dev

您现在应该可以运行您的第一个 Vue 项目了！

下面是一些额外的提示：

• 推荐的 IDE 设置是Visual Studio Code+Volar扩展。WebStorm 也是改进的。
• 工具指南中讨论了更多工具细节，包括与框架的更多集成。
• 要了解相关文档制作工具Vite的更多信息，请查看Vite。
• 如果您选择使用 TypeScript，请查看 TypeScript 使用指南。

当您准备好将您的应用程序发布到生产环境时，请运行以下命令：

npm run build

./dist这将在项目应用程序的应用程序的生产版本中，了解您的相关生产目录。您将查看生产应用程序的应用程序创建的更多信息。

CDN 加载使用

要在没有制造步骤的情况下开始使用 Vue，只需将以下代码复制到 HTML 文件中，并在浏览器中打开它：

{{ message }}

示例 API 都使用了 Vue 的所有要素Vue。

为了在文档中使用工作成果，但我们主要在文档中使用其他模块的语法请以保留 Vue的部分 ES 模块，改写下面的 HTML：

{{ message }}

注意如何从'vue'我们的代码中导入——我们可以直接通过块实现，使用 Maps 的本机浏览器功能。导入地图目前仅在基于 Chromium 的浏览器中可用，因此我们建议在学习过程中使用您的浏览器不支持您导入映射，您可以使用Chrome 或 Edge 进行填充。

您可以将其他依赖的目录添加到映射项-只需确保它们指向您导入使用库的 ES 模块版本。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com