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

目录
相关文章
|
10天前
vue3【实战】语义化首页布局
vue3【实战】语义化首页布局
29 2
|
10天前
|
存储 容器
vue3【实战】来回拖拽放置图片
vue3【实战】来回拖拽放置图片
20 2
|
10天前
|
JavaScript 开发工具 开发者
vue3【提效】使用 VueUse 高效开发(工具库 @vueuse/core + 新增的组件库 @vueuse/components)
vue3【提效】使用 VueUse 高效开发(工具库 @vueuse/core + 新增的组件库 @vueuse/components)
34 1
|
10天前
|
API
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
Pinia 实用教程【Vue3 状态管理】状态持久化 pinia-plugin-persistedstate,异步Action,storeToRefs(),修改State的 $patch,$reset
20 1
|
10天前
|
JavaScript
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
vue3 【提效】自动注册组件 unplugin-vue-components 实用教程
18 1
|
5天前
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
【vue3】Argumnt of type ‘history:RouterHistory;}is not assignable to paraeter of type ‘RouterOptions‘.
6 0
|
5天前
|
JavaScript
【vue3】vue3中路由hash与History的设置
【vue3】vue3中路由hash与History的设置
11 0
|
5天前
|
编解码 前端开发
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
24 0
|
5天前
|
JavaScript
【vue】 vue 翻页时钟制作,vue2、vue3
【vue】 vue 翻页时钟制作,vue2、vue3
11 0
|
10天前
vue3 【提效】自动导入框架方法 unplugin-auto-import 实用教程
vue3 【提效】自动导入框架方法 unplugin-auto-import 实用教程
20 0