Use Vue-cli3 build Vue + TypeScript project

First, create a project

Use  npm the installation  vue-cli 3 andtypescript

npm i -g @vue/cli typescript

Use vue createcommands to quickly build a scaffold for new projects

vue create vue-ts

vue-ts is the name of our project, after executing the above command, the following options appear

Here is a single choice, you can press 上/下键to switch options, press enterthe next step. These two options represent:

• default Is the default option, behind  babel,  eslint represent only the introduction of these two
• Manully select features Is manually selected

Because we have to use  Vue+TypeScript, so choose  Manully select features.

Press enterenter the next step:

Here are a number of options, according to the 上/下键switching option, 空格键this option is selected, enter键the next step. You can according to the actual situation of the project, select the appropriate option.

Here I am going to make a vue-ts study notes, behind will continue to learn how to TypeScriptuse  vuex and router, therefore select  Babel,  Typescript,  Router,  Vuex,  CSS Pre-processors,  Linter/ Formatter these items on it.

Press enterenter the next step:

Here it is to ask whether the use of  class风格components of grammar, in order to make it easier to use  TypeScript, we have chosen Y.

We do not know when that option is selected, you can press enter, use the default option.

Press enterenter the next step:

Here it is not clear what is meant, skip, press enter to use the default option.

Press enterenter the next step:

Here you are asked whether to use  router the  historymodel, if you choose, in a production environment, the server needs to be indexed fallback do the appropriate configuration. This has no effect on our demo, according to the same enterdefault options.

Press enterenter the next step:

Here is the selection CSS预处理器may be a self select.

Press enterenter the next step:

Here is a selection code checking tool, I personally like to use  ESLint + Prettier. Because  Prettier not only can be formatted js代码, you can also format  css and  vuetemplate files in  template the code section.

Press enterenter the next step:

Here is the choice when to code formatting, select  Lint on save.

Press enter, and enter the next step:

Here is asked in what configuration  Babel，PostCSS, ESLint , etc.

• In dedicated config files In a special configuration file
• In package.json In the configuration package.jsonfile

We chose  In dedicated config files ,

Press enterenter the next step

Here it is to ask: whether to save the current configuration selected, the next time you set up to facilitate reuse project.

We skip, by enter，waiting for the completion of the project to initialize it.

Second, the configuration .prettierrc

Code checking tool selection ESLint +  Prettiertime, ESLintwith Prettierconflicting entries are closed configuration, using the Prettierconfiguration items. This document lists ESLintthe Prettierconfiguration items conflict.

Since individuals are accustomed to  the use of single quotes strings  and no semicolon sentence, but the string is formatted as Prettier double quotation marks, and automatically semicolon end of the sentence, and therefore needs to be configured separately. Configuration is also very simple:

(With package.json same directory) to create a .prettierrc.js file in the project root directory, and add the following configuration can be:

.Eslintrc.js modify the file, add the following line of code on it:

Now let's see if the configuration is successful. First open sr / main.ts:

It can be seen semicolon and double-quoted strings are being given the end of the sentence, then simply press ctr + s to save, you can automatically correct all the error.