提示:vue3依赖18.0 或更高版本的 Node.js
前言
使用@vue/cli脚手架vue create创建
使用vue-cli脚手架vue init webpack创建
一、查看nodejs版本
1、查看nodejs版本
node -v
二、创建项目
创建项目如果有问题,跳转去看之前的文章。 火箭直达-vue3新建项目
npm create vue@latest
3、目录结构
三、安装依赖并启动文件
cd package-v3-js
npm install
npm install element-plus --save
npm run dev
四、新建、修改组件引用
1、APP.vue
<script setup>
import ColorPicker from './components/colorPicker/Index.vue';
import TabsCom from './components/tabs/Index.vue';
</script>
<template>
<div>
<ColorPicker></ColorPicker>
<TabsCom></TabsCom>
</div>
</template>
<style scoped>
</style>
2、src/components/colorPicker/Index.vue
<template>
<div class="demo-color-block">
<span class="demonstration">With default value</span>
<el-color-picker v-model="color1" />
</div>
<div class="demo-color-block">
<span class="demonstration">With no default value</span>
<el-color-picker v-model="color2" />
</div>
</template>
<script setup>