本文是参考文章加上自己的记忆结合过程记录，以备日后复习使用。如果有什么错误或者更好的方法，欢迎提出建议~1.首先安装vue-cli3.0和typescript。如果之前安装过2.X，需要卸载`npmi-g@vue/clitypescript`查看typescript版本信息方法：tsc-v2，创建vue项目`vuecreateprojectname`创建项目配置:询问是否使用之前保存的模板，或者只有babel和eslint的默认模板，或者新的配置。这里选择第三项Manuallyselectfeatures，按上下键选择，按回车键确认需要选择哪些插件，按上下键移动，选择空格键，回车确认。这次选择上面的配置，回车，区分eslint和prettier：eslint是一个JavascriptLinter，帮助我们规范代码质量，提高团队开发效率。虽然可以帮助我们提高代码质量，但是不能完全统一编码风格，因为这些代码规范的重点不在代码风格上，虽然有一定的限制。prettier是一个可以统一团队编码风格的工具，可以大大提高团队的执行效率。统一的编码风格可以保证代码的可读性。这里是问是否使用class-style的组件语法。为了更方便的使用TypeScript，我们选择Y，回车。当我们不知道选择哪个选项时，我们可以直接回车使用默认选项。这里是询问是否使用路由器的历史模式。如果选择是，在生产环境中，服务器端需要对索引回退做相应的配置。这对我们的演示没有影响，同样按回车键使用默认选项。这里是选择CSS预处理器，大家可以自己选择，这里是选择代码检查工具，参考文章推荐使用ESLint+Prettier。原因是Prettier不仅可以格式化js代码，还可以格式化css和vue模板文件中模板部分的代码。这里是选择何时格式化代码，选择Lintonsave。这里有一个问题是在哪里配置Babel、PostCSS、ESLint等。Indedicatedconfigfiles在一个特殊的配置文件中Inpackage.jsonConfigureinpackage.json我们选择Indedicatedconfigfiles**这里有一个问题：是否保存这个选择的配置方便下次构建项目时复用。我们直接跳过，回车，等待项目初始化完成。**3。配置.prettierrc文件。**当代码检查工具选择ESLint+Prettier时，会关闭ESLint和Prettier冲突的配置项，使用Prettier的配置项。本文档列出了ESLint与Prettier冲突的配置项。Prettier会将字符串格式化为双引号，并自动在句末添加分号。如果要配置使用单引号，末尾不要分号，可以这样配置：在项目根目录（与package.json同级目录）新建.prettierrc.js文件，添加如下内容配置**module.exports={singleQuote:true,semi:false}修改.eslintrc.js文件，添加这行代码：检查是否配置成功，打开main.tsctrl+s检查结果是否生效，配置成功，我们安装elementui4，安装elementuivueadd元素询问是全部导入还是按需导入，按上下键选择第二个，按需导入，回车第一个中文（我不知道是什么意思，有什么要补充的吗？我只知道是中文）意思）然后发现项目中src下多了一个文件夹，main.c中也多了一行代码。TS。Vuefrom'vue';import{分页，对话框，自动完成，下拉菜单，DropdownMenu，DropdownItem，菜单，子菜单，MenuItem，MenuItemGroup，输入，InputNumber，单选，RadioGroup，RadioButton，复选框，CheckboxButton，CheckboxGroup，开关，选择，选项，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}来自'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(菜单项)Vue.use(菜单项组)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。使用（我法师)Vue.use(日历)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以上是项目搭配置过程
