【Vue】VueCli project creation instructions

Vue3.0 is excellent; But the ecological environment is not yet mature, and many problems we encounter in production cannot be solved. Therefore, this tutorial is based on Vue2.0:

Create a project

Assuming the project name is example, create the project.

vue create example
Copy the code

Arrow key operation. Enter key select Manually Select Features.

❯ my-vue-cli ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)
  Default (Vue 3 Preview) ([Vue 3] babel, eslint)
  Manually select features
Copy the code

Direction key operation, space bar selection; Press Enter to proceed to the next step.

The selection criteria are as follows:

? Check the features needed for your project: ◉ Choose Vue version ◉ Babel Infection infection TypeScript infection Progressive Web App (PWA) Support ◉ Router ◉ Vuex port CSS pre-processors ◉ Linter/Formatter ◉ Unit Testing ◉ E2E TestingCopy the code

Plug-in purpose description:

Unit Testing and E2E Testing are not used in development phase one, and tests are enabled if development time is sufficient.

TypeScript was adopted as Vue3 matures and is not supported in Vue2.0.

Console select ve2. X and press Enter to proceed to the next step:

? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
❯ 2.x
  3.x (Preview)
Copy the code

The history mode of the Vue Router is not used because there is no redundant configuration in this project.

Type n and press Enter to proceed to the next step:

Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n
Copy the code

Dynamic CSS Sass/SCSS (with Dart-SASS) (default) is the most popular and best dynamic CSS compiler available.

Press Enter to proceed to the next step:

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
❯ Sass/SCSS (with dart-sass)
  Sass/SCSS (with node-sass)
  Less
  Stylus
Copy the code

The code style is ESLint with Error Prevention Only (default). Because when you write code that doesn’t conform to the standard development style, bugs can only be reported during development.

Press Enter to proceed to the next step:

Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
Copy the code

Select style check at save time (default) and press Enter to proceed to the next step:

Pick additional lint features: (Press <space> to Select, <a> to Toggle all, < I > to Invert selection) ❯◉ Lint on save infection of Lint and fix on commitCopy the code

Unit test plugin select Mocha + Chai (default), also the most popular, and press Enter to proceed to the next step:

Pick a unit testing solution: (Use arrow keys)
❯ Mocha + Chai
  Jest
Copy the code

E2E test plug-in select Cypress (Chrome only) (default, only Google Browser debugging), also the most popular, directly press Enter to proceed to the next step:

Pick an E2E testing solution: (Use arrow keys)
❯ Cypress (Chrome only)
  Nightwatch (WebDriver-based)
  WebdriverIO (WebDriver/DevTools based)
Copy the code

Configuration file select configure in a separate file (default) and press Enter to proceed to the next step:

Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files
  In package.json
Copy the code

Save the current selection as a “future” so that you don’t have to select again when creating the project:

Enter y agree, then enter the name “vue2-standard” :

Save this as a preset for future projects? (y/N) y
Save preset as: vue2-standard
Copy the code

Waiting for installation to complete

Add internationalization plug-ins

Internationalization is to enable the project to switch between different languages.

cd example
vue add i18n
Copy the code

Installation standard:

? The locale of project localization. zh
? The fallback locale of project localization. zh
? The directory where store localization messages of project. It's stored under `src` directory. locales
? Enable locale messages in Single file components ? No
Copy the code

Enable locale messages in Single file Components Whether to use i18N nodes in vue files, in the following style:

<i18n> { "en": { "hello": "hello world!" }, "JA ": {" Hello ":" Hello ": "Hello! } } </i18n> <template> <div id="app"> <label for="locale">locale</label> <select v-model="locale"> <option>en</option> <option>ja</option> </select> <p>message: {{ $t('hello') }}</p> </div> </template> <script> export default { name: 'app', data () { return { locale: 'en' } }, watch: { locale (val) { this.$i18n.locale = val } } } </script>Copy the code

This style is more suitable for Vue3.0, where we unify the internationalization configuration in a single file.