【1.0】vue3的创建-EW帮帮网

【1.0】vue3的创建

【一】vue3介绍

vue2的所有东西，vue3都兼容
vue3中写js代码由两种，组合式和配置项
- 配置项api，就是vue2的写法，将数据放进data，方法放进methods等
```
    	export default{
            data(){
                return {}
            },
            methods:{}
        }
```
- 组合式，就是一个功能，上面直接写变量，下一行可以直接写函数，但是得return返回出去
```
const items = ref([{ message: 'Foo' }, { message: 'Bar' }])
function add(){  }
```

【二】vue3项目创建

#1 什么是vite？—— 新一代前端构建工具。
优势如下：
开发环境中，无需打包操作，可快速的冷启动。
轻量快速的热重载（HMR）。
真正的按需编译，不再等待整个应用编译完成。



# 2 兼容性注意
Vite 需要 Node.js 版本 18+，20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本
官网：https://cn.vitejs.dev/

vue-cli创建和vue2基本一致

（1）vue-cli创建

【1】cmd命令，“D：”+enter进入d盘或者输入vue ui进入网页创建

【2】创建项目

```
vue create vue3_0815（项目名）
```

【3】选配置

mannly自定义
router/vuex/babel/选中
版本3.x
history版本

（2）vue-vite创建（推荐）

【1】点进官网

```
https://cn.vitejs.dev/
```

【2】配置镜像站

cmd查看本地镜像
```
npm config get registry
```

配置淘宝的镜像站

npm config set registry https://registry.npmmirror.com

【3】创建项目

    # 创建项目方式一(后期还是要输入project_name)
    	npm create vite@latest
	# 创建项目方式二:指定名字
    	npm create vite@latest vue3_demo002
    # 创建项目方式三
    	cnpm create vite@latest vue3_demo002
    # 创建项目方式四
    	cnpm create vite vue3_demo002

回车 选择vue，下一步选择js

【4】打开

用pycharm打开

右上角 edit_configurations
加号npm
--在script中输入serve（vue-cli)
--在script中输入dev（vue-vite)

我在npm run dev报错，是因为没有install vue点击那个感叹号提示自动下载的

【5】补充

vue-cli和vite区别在页面上，命令一个是serve一个是dex，都可以在package.json中修改

{
  "name": "vue3_vite0815",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",---可以是script，此时就是run serve
    "build": "vite build",
    "preview": "vite preview"
  },

【三】快速体验组合式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style></style>
</head>
<body>
<div id="app">

    <p>{{count}}</p>
    <br>
    <button @click="handleAdd">点我加1</button>


</div>
</body>
<script>

    let app=Vue.createApp({
        setup() {
            let count=Vue.ref(0)
            let handleAdd=()=>{
                count.value++
            }
            return {
                count,
                handleAdd
            }
        },

    })
    app.mount("#app")

</script>
</html>

【四】快速体验配置项

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <style></style>
</head>
<body>
<div id="app">

    <p>{{count}}</p>
    <br>
    <button @click="handleAdd">点我加1</button>


</div>
</body>
<script>

    let app=Vue.createApp({
        data(){
            return {
                count:100
            }
        },
        methods:{
            handleAdd(){
                this.count++
            }
        }
    })
    app.mount("#app")

</script>
</html>

【五】拥抱ts

# 1 之前写vue2用js
# 2 vue3-->ts-->微软推出的--》最终要被编译成js才能运行在浏览器中
	-使用ts写，可以避免很大错误
    -ts是js的超集---》ts完全兼容js
    
    
# 3 我们学的是
	vue2+js+vue-router+vuex+elementui
	vue3+js+vue-router+pinia+elementui-plus
    
# 4 变化
    新的生命周期钩子
    data 选项应始终被声明为一个函数
    移除keyCode支持作为 v-on 的修饰符

【1.0】vue3的创建

【1.0】vue3的创建

【一】vue3介绍

【二】vue3项目创建

（1）vue-cli创建

（2）vue-vite创建（推荐）

【三】快速体验组合式

【四】快速体验配置项

【五】拥抱ts

网站公告

今日签到

热门文章

最新发布