持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情
搭建vue-cli脚手架工具
Vue提供一个官方的CLI，首先安装好该脚手架。官网：cli.vuejs.org/zh/guide/
npm install -g @vue/cli
创建项目
vue create hello-world
可选择以前配置过的default选项，或者选择Manually select features自定义你要配置的选项
按住空格键，括号重出现*即表示已选中。我这里就选择version,Babel,TypeScript，CSS Pre-processors,Router，Linter/formatter即可。
其中有一点，如果你在这里忘记配置ts，项目创建完成后，在命令行输入vue add typescript也是一样的。
接下来就会根据你所选择的配置项，让你回答以下问题：
Please pick a preset: Manually select features ? Check the features needed for your project: Choose Vue version, Babel, TS, Router, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
首先选择版本，这里我选择vue3.0
? Use class-style component syntax? No
是否使用Class风格装饰器，即代码会通过export default class Home extends Vue{} 创建Vue实例，建议新生不要选择这一项
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes
是否使用Babel做转义，与TypeScript一起用于自动检测
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
路由是否使用history模式
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
选择一种css预处理器，这里我选择了Sass/SCSS
? Pick a linter / formatter config: Basic
选择一种代码格式化检测工具
? Pick additional lint features: Lint on save
代码检查方式，这里我选择保存时即检查
? Where do you prefer placing config for Babel, ESLint, etc.?
Babel, ESLint, etc.文件如何存放（单独配置或放package.json），这里我选择直接放到package.json
? Save this as a preset for future projects?
是否将以上的配置促成一个默认项，以后就无需再单独配置
接下来进入到我们的项目cd hello-world以及npm run serve
引入elementUI3
接下来按照全局引入总结：
首先安装
npm install element-plus --save
接下来在main.ts中引入：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App).use(router).use(ElementPlus).mount('#app')
最后在业务代码中测试一下是否引入即可
<template>
<div class="home">
<el-form :model="form" label-width="120px">
<el-form-item label="Activity name">
<el-input v-model="form.name" />
</el-form-item>
</el-form>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive} from 'vue'
interface Form {
name: string
}
export default defineComponent({
setup() {
const form= reactive<Form>({name:'2321321323'})
console.log(form)
return {form};
}
})
</script>
