Create a Vue project

1. Create a project in the current directory

vue create .
Copy the code

2. Select Custom create and uncheck lint/formatter option

3. Add the required packages for ESLint

npm i eslint eslint-plugin-vue @vue/eslint-config-airbnb prettier prettier-eslint vue-eslint-parser -D
Copy the code

Create an ESLint configuration file

module.exports = {
  extends: ['plugin:vue/recommended'.'@vue/airbnb'].rules: {
    'linebreak-style': ['off'.'windows'].'no-shadow': ['error', { allow: ['state']}],}};Copy the code

Configuration vscode

1. Download relevant plug-ins

Vetur, ESLint, Prettier ESLint

2. Set related options, such as tabsize=2

3. Configure the default formatting mode in the file in the corresponding format

Format Alt + Shift + F for the first time Select formatting mode Prettiier ESLint,

A. If the Settings are incorrect, press CTRL + Shift + P to search for open Settings.

Open the configuration file, delete the default formatting items, and select them again

B. You can also press CTRL + Shift + P to search for Format Document with and set new default formatting options

The final settings.json file should have at least the following configuration items

{
    "[vue]": {
        "editor.defaultFormatter": "rvest.vs-code-prettier-eslint"
    },
    "editor.tabSize": 2
}
Copy the code

Git in the source

  1. Viewing the Current Source
  2. Deleting the current Source
  3. Add a new source
  4. Push local code to remote (prompts for Gitee account and password)
git remote -v git remote remove origin git remote add origin https://gitee.com/feng-yixing/dlseed.git git push -u origin  masterCopy the code

Modify the package management tool used by vue scaffolding by default

vi ~/.vuerc
Copy the code

Js packages that are not downloaded by NPM are used in Vue projects

  1. Import third-party packages into the public folder
  2. Import this third-party package in index.html under public
  3. Configure externals in the vue.config.js file to import variables and methods provided in the package for external use in the component
module.exports = {
    configureWebpack: {
        externals: {
            // Package name: global variable name
            jsencrypt: 'JSEncrypt'}}}Copy the code

Vue packages static files to import address configuration

module.exports = {
    publicPath: '/marketPlat'
}
Copy the code