Vue3——基础内容部分(小满版本)(一)

简介: Vue3——基础内容部分(小满版本)

第一章 课程导读

  • 这章节是小满的自我介绍,还有介绍学习课程前需要的前置技术栈,祝你学习路程愉快
  • 然后就是没事的话多发弹幕,可以将你在小满视频中遇到的问题的解决方法发在弹幕中,给后来者提供一些道路,学习的氛围也会更好

第二章 — 构建 vite 项目

  1. 使用vite初始化一个项目(npm、yarn)
npm init vite@latest
yarn create vite
  1. y继续,然后给项目起个名字,这里我的名字是vite-app
  2. 注意:在哪里打开终端,你的项目就建立在哪里

image.png

安装依赖:npm install
依赖安装好了之后就会放到node_modules这个文件夹下
启动项目:npm run dev

第二天之后启动项目可能会报错,说你没有权限

解决方法在下方链接里:

https://blog.csdn.net/weixin_37861326/article/details/104295379

package json 命令解析

{
  "scripts": {
    "dev": "vite", // 启动开发服务器,别名:`vite dev`,`vite serve`
    "build": "vite build", // 为生产环境构建产物
    "preview": "vite preview" // 本地预览生产构建产物
  }
}

安装Vue cli脚手架

安装:npm install @vue/cli -g
检查安装:Vue -V

image.png

image.png

使用脚手架


vue create project(命令行)

上面二选一就行了,个人认为vite好用

Vite 目录

public 下面的不会被编译 可以存放静态资源

assets 下面可以存放可编译的静态资源

components 下面用来存放我们的组件

App.vue 是全局组件

main ts 全局的 ts 文件

index.html 非常重要的入口文件 (webpack,rollup 他们的入口文件都是 enrty input 是一个 js 文件 而 Vite 的入口文件是一个 html 文件,他刚开始不会编译这些 js 文件 只有当你用到的时候 如 script src="xxxxx.js" 会发起一个请求被 vite 拦截这时候才会解析 js 文件)

vite config ts 这是 vite 的配置文件具体配置项

VsCode Vue3 插件推荐 Vue Language Features (Volar)

SFC 语法规范

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

Vue3——基础内容部分(小满版本)(二)https://developer.aliyun.com/article/1470373

目录
相关文章
|
2天前
|
前端开发 JavaScript API
Vue3 五天速成(下)
Vue3 五天速成(下)
27 1
|
2天前
|
JavaScript 前端开发 网络架构
Vue3 五天速成(中)
Vue3 五天速成(中)
11 1
|
2天前
|
Web App开发 缓存 JavaScript
Vue3 五天速成(上)
Vue3 五天速成(上)
12 2
|
2天前
vue3版本的爱心源码
vue3版本的爱心源码
5 0
|
2天前
|
XML JavaScript 前端开发
Vue3 项目中怎么使用 jsx——易懂
Vue3 项目中怎么使用 jsx——易懂
6 0
|
2天前
|
JavaScript
vue3 实现电子签名
vue3 实现电子签名
6 1
|
2天前
|
JavaScript
vue3表格编辑(数据回显)和删除功能实现
vue3表格编辑(数据回显)和删除功能实现
7 1
|
2天前
|
JavaScript
vue3中reactive和ref函数及对比
vue3中reactive和ref函数及对比
7 1
|
2天前
|
编译器
vue3组件TS类型声明实例代码
vue3组件TS类型声明实例代码
5 0
|
2天前
|
JavaScript
Vue3中props的原理与使用
Vue3中props的原理与使用
8 0