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 文件中，并在浏览器中打开它：

<script src="https://unpkg.com/vue@3"></script>

<div id="app">{{ message }}</div>

<script>
  Vue.createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

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

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

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

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

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