current position:Home>Vue project construction and configuration

Vue project construction and configuration

2021-08-26 00:39:19 QDM

establish Vue project

1、 Create a project in the current directory

vue create .
 Copy code 

2、 Select custom create , Deselect lint / formatter Options

3、 add to eslint The bag you need

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

4、 establish eslint The configuration file

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

To configure vscode

1、 Download related plug-ins

vetur、ESLint、Prettier ESLint

2、 Configure related options , Such as tabsize=2

3、 Configure the default formatting method , Configure... In the file under the corresponding format

For the first time to use alt+shift+f Press the shortcut key to format and select the format method Prettiier ESLint,

a. If the selection is wrong , It can be done by ctrl+shift+p Search for open settings,

Open profile , Delete the configured Default Formatting item to perform the next formatting , To choose

b. Can also pass ctrl+shift+p Search for format document with, Configure new default formatting options

Final settings.json There must be at least the following configuration items in the file

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

git Source change

  1. View the current source
  2. Delete current source
  3. Add new source
  4. Push local code to remote ( Will prompt for gitee Account and password )
git remote -v
git remote remove origin
git remote add origin
git push -u origin master
 Copy code 

modify vue The default package management tool for scaffolding

vi ~/.vuerc
 Copy code 

Vue The use of non npm Download the js package

  1. Introduce third-party packages into public Under the folder
  2. stay public Under the index.html Introduce this third-party package into
  3. stay vue.config.js Configuration in file externals, You can go through... In the component import Introduce the variables and methods provided for external use in the package
module.exports = {
    configureWebpack: {
        externals: {
            //  Package name : Global variable name 
            jsencrypt: 'JSEncrypt'
 Copy code 

Vue Package static files to import address configuration

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

copyright notice
author[QDM],Please bring the original link to reprint, thank you.

Random recommended