vue3项目实战-项目搭建引入 element-plus

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第22天，点击查看活动详情

首先先创建一个vue3项目

vue create vue3-ts-demo

然后选择手动创建

然后选中typescript、Router、CSS Processors

Use class-style component syntax? No Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes Use history mode for router? (Requires proper server setup for index fallback in production) Yes Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys) ❯ Sass/SCSS (with dart-sass) Yes 后面就一路回车就可以了。

搭建完成就直接cd ./vue3-ts-demo

然后启动项目

npm run serve

全局导入

如果你对打包后的文件大小不是很在乎，那么使用完整导入会更方便。

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

createApp(App).use(router).use(ElementPlus).mount('#app')

按需引入

首先你需要安装unplugin-vue-components 和 unplugin-auto-import这两款插件

npm install -D unplugin-vue-components unplugin-auto-import

vue-cli搭建的项目现在也没有package.json

可以在vue.config.json中配置

const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const {
  ElementPlusResolver
} = require('unplugin-vue-components/resolvers')
const {
  defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ]
  }
})

修改配置文件就要重新启动项目。

登录路由配置

创建文件 /src/views/LoginView.vue

可以使用快捷键vb 然后选择 -ts 那个就可以快速生成基本结构，当然前提是要先下载一个vscode的插件，Vue VSCode Snippets

<template>
  <div>登录页面</div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  setup() {
    return {};
  },
});
</script>

<style lang="scss" scoped>
    
</style>

然后修改router.ts文件，增加一项配置

const routes: Array<RouteRecordRaw> = [

  {
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: "about" */ '../views/LoginView.vue')
  }
]

然后可以直接访问/login 页面

就可以看到login页面了 然后在app.vue里重置一下css样式，把一些padding和margin都清空，至此项目就已经搭建完成了。

* {
  padding: 0;
  margin: 0;
}