我是靠谱客的博主 爱听歌小蘑菇,最近开发中收集的这篇文章主要介绍【Vue3 第二章】脚手架搭建,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

Vue3+Vite+VueRouter+Pinia+Axios+ElementPlus

一、环境配置

  1. 开发环境:Vite3+ Vue3

    • 兼容性:Vite 需要 Node.js版本 14.18+,16+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。
    • Vue3 采用组合式 API
  2. 官方推荐的 IDE 配置: Visual Studio Code

  3. Vite 搭建脚手架

    执行如下命令初始化项目

    npm init vue@latest
    

    这一指令将会安装并执行 create-vue,它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 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 formatting? … No / Yes
    Scaffolding project in ./<your-project-name>...
    Done.
    

    如果不确定是否要开启某个功能,你可以直接按下回车键选择 No。在项目被创建后,通过以下步骤安装依赖并启动开发服务器:

    cd <your-project-name>
    npm install
    npm run dev
    

    注:也可以采用 vite 官方命令配置 vue 项目:

    npm init vite@latest
    # or
    npm create vite@latest
    

    安装 sass 预处理语言:

    npm install --save-dev sass
    

二、脚手架目录介绍

  • public 下面的不会被编译 可以存放静态资源
  • assets 下面可以存放可编译的静态资源
  • components 下面用来存放我们的组件
  • router 存放路由相关文件
  • stores 存放状态管理相关文件
  • App.vue 是全局组件
  • main.js 全局的 js 文件
  • index.html 非常重要的入口文件 (Vite 的入口文件是一个 html 文件,他刚开始不会编译这些 js 文件 只有当你用到的时候 如script src=“xxxxx.js” 会发起一个请求被vite拦截这时候才会解析js文件)
  • vite.config.js 这是vite的配置文件具体配置项 后面会详解

三、SFC 语法规范解析

*.vue 件都由三种类型的顶层语法块所组成:<template><script><style>

  • <template>
    • 每个 *.vue 文件最多可同时包含一个顶层 <template> 块。
    • 其中的内容会被提取出来并传递给 @vue/compiler-dom,预编译为 JavaScript 的渲染函数,并附属到导出的组件上作为其 render 选项。
  • <script>
    • 每一个*.vue文件可以有多个 <script> 块 (不包括<script setup>)
    • 该脚本将作为 ES Module 来执行。
    • 其默认导出的内容应该是 Vue 组件选项对象,它要么是一个普通的对象,要么是 defineComponent 的返回值。
  • <script setup>
    • 每个 *.vue 文件最多只能有一个 <script setup> 块 (不包括常规的 <script>)
    • 该脚本会被预处理并作为组件的 setup() 函数使用,也就是说它会在每个组件实例中执行。<script setup> 的顶层绑定会自动暴露给模板。更多详情请查看 <script setup> 文档。
  • <style>
    • 一个 *.vue 文件可以包含多个 <style> 标签。
    • <style>标签可以通过 scoped module attribute (更多详情请查看 SFC 样式特性) 将样式封装在当前组件内。多个不同封装模式的 <style> 标签可以在同一个组件中混用。

推荐采用国内淘宝镜像策略

全局安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

最后

以上就是爱听歌小蘑菇为你收集整理的【Vue3 第二章】脚手架搭建的全部内容,希望文章能够帮你解决【Vue3 第二章】脚手架搭建所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(53)

评论列表共有 0 条评论

立即
投稿
返回
顶部