此文章是借鉴文章加上本人的记忆联合过程记录，以备日后温习和应用。有不对或者更好办法的欢送提出呢～
1、首先装置vue-cli3.0和typescript，如果之前有装置2.X须要先卸载
`npm i -g @vue/cli typescript`查看typescript版本信息办法：tsc -v
2、创立vue我的项目
`vue create projectname`创立我的项目配置：
询问是用之前保留的模板，还是默认只有babel和eslint的模板，还是本人新配置。这里抉择第三项Manually select features，高低键抉择，回车键确定
抉择须要哪些插件
高低键挪动，空格键抉择，回车确定。此次抉择以上配置，回车
这里是询问是否应用 class格调的组件语法，为了更不便地应用 TypeScript，咱们抉择 Y，回车就行。
当咱们不晓得抉择那个选项时，能够间接按enter，应用默认选项。
这里是询问是否应用 router 的 history模式，如果抉择是，在生产环境中，服务端须要为索引回退做适当的配置。这个对咱们的 demo 没有影响，同样按enter应用默认选项。
这里是抉择CSS预处理器，能够自行抉择一种
这里是抉择代码查看工具，参考的文章举荐应用 ESLint + Prettier。起因是 Prettier 不仅能够格式化js代码，还能够格式化 css 和 vue模板文件中 template 局部的代码。
这里是抉择什么时候进行代码格式化，抉择 Lint on save。
这里是询问在什么中央配置 Babel，PostCSS, ESLint 等
In dedicated config files在专门的配置文件中In package.json配置在package.json文件中
咱们抉择 In dedicated config files
这里是询问：是否保留本次所选的配置，不便下次搭建我的项目时复用。
咱们间接跳过，按enter，期待我的项目初始化实现就能够了。
3、配置 .prettierrc文件。
代码查看工具抉择ESLint + Prettier时，ESLint与Prettier相冲突的配置项会被敞开，采纳的是Prettier的配置项。这个文档，列出了ESLint与Prettier抵触的配置项。
Prettier会将字符串格式化为双引号，并在句尾主动增加分号。如果要配置应用单引号和无分号结尾能够这么配置：
在我的项目根目录下（与 package.json 同级目录）创立一个 .prettierrc.js文件，并加上以下配置module.exports = { singleQuote: true, semi: false}批改.eslintrc.js文件，加上这行代码就能够了：
查看是否配置胜利，关上main.ts
ctrl+s查看后果
起作用，配置胜利，上面来装置elementui
4、装置elementuivue add element
询问是全副引入还是按需引入，高低键抉择第二个，按需引入，回车
第一个 中文 回车（这一块我也不晓得什么意思，请问有补充的吗？我只晓得是中文的意思）
而后就回发现 我的项目中src下多了一个文件夹，main.ts也多了一行代码
elementui.js只给出了一个例子，全副数据以下是翻阅其余文档整顿给出的，供参考
import Vue from 'vue';import { Pagination, Dialog, Autocomplete, Dropdown, DropdownMenu, DropdownItem, Menu, Submenu, MenuItem, MenuItemGroup, Input, InputNumber, Radio, RadioGroup, RadioButton, Checkbox, CheckboxButton, CheckboxGroup, Switch, Select, Option, OptionGroup, Button, ButtonGroup, Table, TableColumn, DatePicker, TimeSelect, TimePicker, Popover, Tooltip, Breadcrumb, BreadcrumbItem, Form, FormItem, Tabs, TabPane, Tag, Tree, Alert, Slider, Icon, Row, Col, Upload, Progress, Spinner, Badge, Card, Rate, Steps, Step, Carousel, CarouselItem, Collapse, CollapseItem, Cascader, ColorPicker, Transfer, Container, Header, Aside, Main, Footer, Timeline, TimelineItem, Link, Divider, Image, Calendar, Backtop, PageHeader, CascaderPanel, Loading, MessageBox, Message, Notification} from 'element-ui'Vue.use(Pagination)Vue.use(Dialog)Vue.use(Autocomplete)Vue.use(Dropdown)Vue.use(DropdownMenu)Vue.use(DropdownItem)Vue.use(Menu)Vue.use(Submenu)Vue.use(MenuItem)Vue.use(MenuItemGroup)Vue.use(Input)Vue.use(InputNumber)Vue.use(Radio)Vue.use(RadioGroup)Vue.use(RadioButton)Vue.use(Checkbox)Vue.use(CheckboxButton)Vue.use(CheckboxGroup)Vue.use(Switch)Vue.use(Select)Vue.use(Option)Vue.use(OptionGroup)Vue.use(Button)Vue.use(ButtonGroup)Vue.use(Table)Vue.use(TableColumn)Vue.use(DatePicker)Vue.use(TimeSelect)Vue.use(TimePicker)Vue.use(Popover)Vue.use(Tooltip)Vue.use(Breadcrumb)Vue.use(BreadcrumbItem)Vue.use(Form)Vue.use(FormItem)Vue.use(Tabs)Vue.use(TabPane)Vue.use(Tag)Vue.use(Tree)Vue.use(Alert)Vue.use(Slider)Vue.use(Icon)Vue.use(Row)Vue.use(Col)Vue.use(Upload)Vue.use(Progress)Vue.use(Spinner)Vue.use(Badge)Vue.use(Card)Vue.use(Rate)Vue.use(Steps)Vue.use(Step)Vue.use(Carousel)Vue.use(CarouselItem)Vue.use(Collapse)Vue.use(CollapseItem)Vue.use(Cascader)Vue.use(ColorPicker)Vue.use(Transfer)Vue.use(Container)Vue.use(Header)Vue.use(Aside)Vue.use(Main)Vue.use(Footer)Vue.use(Timeline)Vue.use(TimelineItem)Vue.use(Link)Vue.use(Divider)Vue.use(Image)Vue.use(Calendar)Vue.use(Backtop)Vue.use(PageHeader)Vue.use(CascaderPanel)Vue.use(Loading.directive)Vue.prototype.$loading = Loading.serviceVue.prototype.$msgbox = MessageBoxVue.prototype.$alert = MessageBox.alertVue.prototype.$confirm = MessageBox.confirmVue.prototype.$prompt = MessageBox.promptVue.prototype.$notify = NotificationVue.prototype.$message = Message以上是我的项目搭建配置过程