一.准备工作
1.安装Visual Studio Code(官方推荐)
2.打开Visual Studio Code,安装插件(编辑器左边的那几个正方形拼接的图形)
1) Vetur:联想一些Vue文件模板
2) Live Server 及时浏览页面
3) Turbo Console Log 自动打印语句
4) Import Cost 显示导入的npm包的大小
5) es6-string-html 高亮显示语法
3.打开菜单栏点击"终端">"新建终端"
1)查看版本
在终端dos窗口输入:
node -v
npm -v
如果没有显示版本号,就需要就行对应内容的安装.
2) 安装@vue/cli,在终端dos窗口输入:
npm install -g @vue/cli
3) 创建项目
在你准备放置项目的地方创建一个文件夹,例如:D:\VSCodeProject
在终端转入到你创建项目的文件夹,继续在终端输入:
npm init vite@latest demo1 -- --template vue
或者
npm init vue@latest
继续在终端输入:
cd <你的项目名称,用英文>
npm install
npm run dev
4) 打开你创建的项目
5) 发布到生产环境,安装lodash-es
打开文件夹(项目)后,继续点击终端,并输入:
npm run build
npm i lodash-es
Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。
二. 浏览器地址栏输入http://localhost:5173/查看页面
三.查看你的代码
在开打的文件中,我们先关注一下三类文件
1) vue组件
src/components/HelloWorld.vue : 子组件
src/App.vue :父组件,引用了HelloWorld.vue
2) src/main.js 将组件加载到页面的一个对象.
3) index.html 引用main.js,利用其将vue组件加载到页面.
四. 编写简单vue代码
在components文件夹下创建:child.vue文件,代码由两部分组成,js和template(也就是html代码)
js是由vue框架书写,负责数据和逻辑,template负责内容的呈现.
具体代码如下.
<!-- setup是组合式API的入口 -->
<script setup>
/**
* 从vue导入ref,reactive对象
* ref:引用简单数据类型,需要使用value属性获取值
* reactive:引用复杂数据类型,例如对象,数组.
* ref,reactive是响应式数据的基础.
* ref,reactive定义的数据,具备当数据发生变化时,绑定数据的控件值同步发生改变
*/
import {ref,reactive} from 'vue'
/**
* const用来定义常量,所谓的常量是不能用代码更改值,但是可以在页面响应式改变值
* ref用来定义简单数据类型
* reactive用来定义负责数据类型,例如实体对象或者数组
*/
const x = ref("不可改变");
const y = reactive([{count:12,msg:"reactive"}
,{count:13,msg:"定义复杂的数据类型"}]);
/**
* let用来定义变量,可以在代码中修改其值.
*/
let a = ref("ref用来定义简单,响应式的数据类型");
a = ref("let的值是可以改变的");
let b = reactive([{count:12,msg:"reactive"}
,{count:13,msg:"定义复杂的数据类型"}
,{count:14,msg:"例如:对象和数组"}]);
</script>
<!-- 在模板中,使用{{}}显示vue定义的值,标签中使用v-model显示值.-->
<template>
<div>
const x = ref(...):
<div>
<input type="text" v-model="x" />{{ x }}
</div>
</div>
<div>
const y = reactive(...):
<div v-for="(item,index) in y" :key="index">
<input type="text" v-model="item.msg" />{{ item.msg }}
</div>
</div>
<br>
<div>
let x = ref(...):
<div>
<input type="text" v-model="a" />{{ a }}
</div>
</div>
<div>
let y = reactive(...):
<div v-for="(item,index) in b" :key="index">
<input type="text" v-model="item.msg" />{{ item.msg }}
</div>
</div>
</template>在src文件夹下创建index2.html文件,内容如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue</title>
</head>
<body>
<!-- 定义的这id=app的div是用来承载组件的 -->
<div id="app"></div>
<!-- 必须以module方式加入代码,才能进行组件的引用 -->
<script type="module">
// 从vue中导入createApp对象
import { createApp } from 'vue'
// 导入组件对象,组件对象的名字叫做child
import child from './components/child.vue'
//将child组件挂载到id为app的标签里面
createApp(child).mount("#app");
</script>
</body>
</html>
