Vue3 - 02.快速过

刘海麒麟

已于 2022-08-28 01:30:05 修改

阅读量222

点赞数

文章标签：前端 typescript javascript vue.js

于 2022-08-27 07:46:18 首次发布

本文链接：https://blog.csdn.net/m0_61877308/article/details/126553685

版权

1.安装nodejs（建议装14版本的）

我们本地运行vue，首先必须需要安装node

下载 Node.js 中文网

安装之后，我们可以使用npm命令，我们可以在终端npm -V看一下是否安装成功

2.构建vite项目

这个是Vite中文网

Vite的优势：

1.冷服务：默认的构建目标浏览器是能在Script标签上支持原生ESM和原生ESM动态导入

2.HMR：快速快到惊人的模块特更新

3.Rollup打包：使用Rollup打包代码，并且她是预配置的，支持大部分rollup插件

使用vite初始化一个项目

我们构建项目可以用两种方式，分别是 npm 和 yarn

npm

npm init vite@latest

yarn

yarn create vite

运行之后，在Project name输入项目名称，按回车，在Select a framework通过上下键选择自己要搭建的项目，比如我们选择vue，之后我们就会生成一个vite空白脚手架。进入项目根目录 npm install 安装依赖，之后输入npm run dev，复制粘贴生成好的localhost或者ip地址在浏览器输入，就能启动我们的项目。

package.jspn命令解析


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

3.vite目录

public：public里面的文件不会被编译，可用于存放静态资源

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

components：components里面一般用来存放我们的公共组件

App.vue：是全局组件

main.ts：是全局ys文件

vite.config.ts：是vite脚手架的配置项

建议使用vscode进行编程，其中推荐安装的插件是Vue Language Features (Volar)

SFC 语法规范

*.vue文件都是幼三部分组成：<template> <script> <style>

npm run dev

在我们执行这个命令的时候，会去找package.jspn的script，然后执行对应的dev命令

模板插值语法

1.我们可以在script声明一个变量，并且在template使用插值语法去显示内容，语法是{{变量名}}

2.插值语法支持三目运算

3.插值语法支持运算结果

4.插值语法支持Array，Object等API

常规指令

指令	说明
v-text	在标签中使用，通过变量名打印结果
v-html	在标签中使用，通过变量名打印富文本（HTML标签）
v-if	控制元素显隐，同 if 语句
v-else	控制元素显隐，同 else 语句
v-else-if	控制元素显隐，同 else if 语句
v-show	通过 css 的display:none 控制元素隐藏
v-on	简写@用来给元素添加事件
v-bind	简写 : 用来绑定元素的属性
v-model	数据双向绑定
v-for	用于循环遍历元素，同for
v-on	修饰符，冒泡案例

v-bind 案例：

<template>
  <div :style="style">Hello</div>
</template>
<script setup lang="ts">
  type Style = {
    color:string,
    fontSize:string
  }
  const style:Style = {
    color:"#f00",
    fontSize:"16px"
  }
</script>

v-model 案例：

<template>
  <div>
    <input type="text" v-model="msg" />
    {{ msg }}
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue'
  const msg = ref("")
</script>