vue3进阶第一章安装

最新推荐文章于 2024-04-25 08:57:56 发布

code_8721

最新推荐文章于 2024-04-25 08:57:56 发布

阅读量445

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_32824897/article/details/131324099

版权

vue3安装的几种方式：
1.通过CDN引入vue3，直接html文件中使用vue3的API.

#CDN地址：
https://unpkg.com/vue@next

2.通过官网地址下载离线包进行使用

官网地址
https://v3.vuejs.org/

步骤 1 和步骤 2 使用方式

<!DOCTYPE html>
<html>
<head>
  <title>My Vue3 App</title>
  <!-- 引入 Vue3 的 CDN -->
  <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
  <div id="app">
    <!-- 这里是 Vue3 的模板部分 -->
    {{ message }}
  </div>
  
  <script>
    const app = Vue.createApp({
      data() {
        return {
          message: 'Hello Vue3!'
        }
      }
    });
    
    app.mount('#app');
  </script>
</body>
</html>

3.npm:Vue.js 3.x 可以使用 npm 进行安装。在命令行中输入以下命令：

npm install vue@next

4.yarn:如果你正在使用 yarn，也可以使用以下命令：

yarn add vue@next

步骤 3 和步骤 4 在html 中直接使用

<!-- 引入 Vue3 的 JS 文件 -->
<script src="https://unpkg.com/vue@next"></script>

<!-- 创建一个 Vue 实例 -->
<script>
  const app = Vue.createApp({
    // 选项
  })
  app.mount('#app')
</script>

<!-- 在 HTML 中添加一个容器 -->
<div id="app">
  <!-- 根据 Vue 实例的逻辑渲染内容 -->
</div>

步骤 3 和步骤 4 在html 中 cmd创建项目

vue create my-project

创建 Vue3 项目时，Vue CLI 会让你选择一些选项和插件，下面是各个选项的介绍：

Choose a version of Vue.js：

选择使用 Vue.js 的版本。目前 Vue CLI 支持 Vue.js 2.x 和 3.x，选择 Vue.js 3.x 就可以创建一个 Vue3 项目。

Use class-style component syntax?：

选择是否使用类风格的组件语法，如果选择 Yes，则会使用 Vue3 新增的 class 风格组件语法。

Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)?：

选择是否使用 Babel 和 TypeScript 配合使用。如果你需要支持浏览器的 ES6+ 语法或者使用自动检测的 polyfill、JSX 编译，那么需要选择 Yes。

Use history mode for router?：

选择是否使用 history 模式的路由。如果要使用单页应用程序(SPA)，则需要选择 Yes。

Pick a CSS pre-processor：

选择使用哪种 CSS 预处理器，可以选择 SASS、LESS、Stylus 或者 CSS。

Pick a linter / formatter config：

选择代码格式化和检查规则的配置，可以选择 ESLint、Prettier 或者没有任何默认配置。

Pick additional lint features：

选择是否启用其他的代码检查规则，可以选择 Lint on save、Lint and fix on commit。

Where do you prefer placing config for Babel, ESLint, etc.?：

选择配置文件存放的位置，可以选择放在 package.json 文件中或者单独创建配置文件。

以上就是创建 Vue3 项目时所需的选项和插件的介绍。根据自己的需求选择相应的选项和插件即可。创建 Vue3 项目时，Vue CLI 会让你选择一些选项和插件，下面是各个选项的介绍：

Choose a version of Vue.js：