基于 Vue Cli4.x + Vue3 + TS + stylus +router + element-plus 的项目搭建

这是一个 Vue Cli + Vue3 + TS 项目且包含 stylus、router 和 element-plus

环境

脚手架必须是 vue-cli4.0+

安装

npm install @vue/cli

查看版本

vue -V

创建项目

vue create webapp

参数

• Please pick a preset:Manually select features

• Check the features needed for your project:Manually select features

• Choose a version of Vue.js that you want to start the project withTS, Router, Vuex, CSS Pre-processors

• Choose a version of Vue.js that you want to start the project with3.x

• Use class-style component syntax?No

• Use Babel alongside TypeScript?No

• Use history mode for router? No

• Pick a CSS pre-processorStylus

• Where do you prefer placing config for Babel, ESLint, etc.?In dedicated config files

• Save this as a preset for future projects?No

**通过 vue/cli 脚手架和上述参数配置项目默认安装了，router、vuex、stylus **

启动

npm run serve

element-plus

安装

官网在此

npm install element-plus --save

引入

main.ts 引入,仅全局引入，按需导入在此

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

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

Volar 支持
如果您使用 Volar，请在 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型
tsconfig.json

{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

使用

src/views/home.vue

<template>
    <div>
        <h1>Home</h1>
        <el-button type="primary">测试按钮</el-button>
    </div>
</template>

效果

其它

如果想使用 vite 创建项目，可参考《基于 Vite + Vue3 + TS + sass + router + element-plus 的项目搭建》