新手学做网站图,江宁营销型网站建设,营销管理系统,thinkphp购物网站开发视频1.创建vu3项目#xff1a;
vue3官网#xff1a;简介 | Vue.js
执行命令
npm create vuelatest
2.终端会出现如下选项#xff0c;不确定的直接enter键进入下一步#xff1b; 3.然后再执行下方命令#xff1a;
cd your-project-name
npm install4.安装依赖成功…1.创建vu3项目
vue3官网简介 | Vue.js
执行命令
npm create vuelatest
2.终端会出现如下选项不确定的直接enter键进入下一步 3.然后再执行下方命令
cd your-project-name
npm install4.安装依赖成功后引入elementplus,执行命令
elementplus官网一个 Vue 3 UI 框架 | Element Plus
npm install element-plus --save
5.引入element-plus分为全局引入和按需引入两种方式一般在工程项目中由于全局引入会导致不必要的资源加载为提升项目性能建议进行按需引入。两种引入方式分别为
5.1全局引入
全局引入就是在项目入口main.ts文件直接引入组件以及组件全部的样式文件代码如下
// main.ts
import { createApp } from vue
import ElementPlus from element-plus //全局引入
import element-plus/dist/index.css
import App from ./App.vueconst app createApp(App)app.use(ElementPlus)
app.mount(#app)5.2按需引入
在vue3中按需引入ElementUI需要使用其他的插件辅助需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件执行如下命令
npm install -D unplugin-vue-components unplugin-auto-import
然后再vite或者webpack或者vue.config.js配置中添加相应的配置如下所示
vite中
// vite.config.ts
import { defineConfig } from vite
import AutoImport from unplugin-auto-import/vite
import Components from unplugin-vue-components/vite
import { ElementPlusResolver } from unplugin-vue-components/resolversexport default defineConfig({// ...plugins: [// ...AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})webpack中
// webpack.config.js
const AutoImport require(unplugin-auto-import/webpack)
const Components require(unplugin-vue-components/webpack)
const { ElementPlusResolver } require(unplugin-vue-components/resolvers)module.exports {// ...plugins: [AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
}vue.config.js中
const { defineConfig } require(vue/cli-service)
const AutoImport require(unplugin-auto-import/webpack)
const Components require(unplugin-vue-components/webpack)
const { ElementPlusResolver } require(unplugin-vue-components/resolvers)module.exports defineConfig({configureWebpack: {plugins: [AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],}
})引入之后按需导入组件如引入input组件和button组件
templatedivel-input classinput v-modelinput typefile placeholderPlease input /el-button classbutton typeprimary文件处理/el-button/div
/templatescriptimport { ElButton, ElInput } from element-plusimport { ref } from vueexport default {components: { ElButton,ElInput },}/script
style scoped
.input {display: inline;margin: 20px 30px;
}
.button {width: 90px;
}
/style
6.运行项目命令
npm run dev
