Some configuration about Vue project creation

1 Vuecli create a project

Create projects based on your own requirements. If you need to install and configure ESLint (code checking tool), see the following configuration before creating projects

Vue create Project nameCopy the code

Once created, use the CD to enter the project and start the project

CD Project name NPM Run ServeCopy the code

2 Push warehouse (gitee for example)

2.0 Git Basics Review

1. Configure user information (first).

git config --global user.name "xxx"
git config --global user.email "[email protected]"

Git config:
git help config (-h)
Copy the code

2. Obtain the Git repository

2.1 Initializing an existing directory
git init
/ / 2.2 cloning
git clone "address"
Copy the code

3. View the status temporary storage

git status // Check the file status
// Compact display
git status -s
git status --short

// Push to the staging area
git add .

// Commit the update
git commit -m "Log"

/ / submit
git push

// View the commit history
git log
git log -2 // The last two commit histories
git log -2 --pretty=oneline // One line displays the latest two commit historiesGit reset --hard <CommitID>// Return to the specified version based on the commit history ID
git relog --pretty=oneline // Used in earlier versions to view command operation history
Copy the code

4. To configure SSH

ssh-keygen -t rsa -b 4096 -C "[email protected]" / / generated SSH
Copy the code

To generate id_rsa and id_rsa.pub files in C:\Users\ username \. SSH, paste the files in id_Rsa. pub to the public key in gitee Settings. Branch of 5.

git branch // View all branches
git checkout login // Switch to the login branchGit checkout -b branch name// Quickly create and switch to the branch
git merge login // Merge the current and login branchesGit branch -d Specifies the branch name// Delete the branch. If the branch is deleted without merging, an error is reportedGit branch -d Specifies the branch name// Forcibly delete
Copy the code

6. Commit (local branch)

git push -u // -u associates the local branch with the remote branch. The -u parameter is required only for the first push
For example:git push -u origin payment:pay

git remote -v // Check the address saved in origin
git remote rm origin // Delete originGir remote show Name of the remote warehouse// View the list of all branches in the remote repository
Copy the code

7. Track branches

// From the remote repository, download the corresponding remote branch to the local repository and rename the downloaded local branchGit checkout -b Local branch name Remote branch name/remote branch name git checkout -b payment origin/payCopy the code

8. Pull the latest code

git pull
Copy the code

2.1 Creating a Local Repository

2.2 Push to Gitee

Git files are automatically generated when you create a project using vue-CLIYou can just follow the tips gitee gives you

// Add the remote address to the local repository
git remote add origin https://gitee.com/user.name/project.name.git
// Push to remote repository
git push -u origin master
Copy the code

Refresh Gitee to see if the code was uploaded successfully

3. Adjust the directory structure and introduce components as required (For example:Vant)

3.1 On production dependency and development dependency

// Production dependency
npm i xxx --save;
npm i xxx -S;
npm i xxx
// Develop dependencies
npm i xxx --save-dev;
npm i xxx -D
Copy the code

3.2 Vant

3.2.1 download

NPM install vant --saveCopy the code

3.2.2 introduced

import Vue from 'vue'
import Vant from 'vant'
import 'vant/lib/index.css'

Vue.use(Vant)
Copy the code

Contrib. gize. IO /vant/#/ zh-c…

4 ESLint (Code Specification)

4.1 What is ESLint

Eslint is a code checking tool used to check whether code conforms to the code specification rules recommendation :github.com/standard/st…

4.2 installation ESLint

4.2.1 Installing plug-ins

4.2.2 Configuration in the Settings Panel

Open it and add this code

{
  "eslint.enable": true."eslint.run": "onType"."eslint.options": {
      "extensions": [
          ".js".".vue".".jsx".".tsx"]},"editor.codeActionsOnSave": {
      "source.fixAll.eslint": true}}Copy the code

4.2.3 Possible problems

Look at the bottom right of the code file

If disabled is displayed, click to open the pop-up dialog box and select Anywhere

4.2.4 Checking whether ESLint takes effect

Change the path of a random file in the project to “vue” and save to see if it automatically changes to “vue”.

5 REM Configuration (Mobile)

5.1 the installation package

// For post-processor development
// Automatically convert px units to REM units
npm i postcss-pxtorem@5.11. -D

// Js plug-ins that modify REM reference values need to be used after packaging
// Adjust rem values according to the width of the screen.
// The default calculation is 1/10 of the screen width. The default is 37.5
npm i amfe-flexible
Copy the code

5.2 configuration postcss

Create the postcss.config.js file in the root directory and add the content

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      // Convert px units of all elements to Rem
      // rootValue: Convert the base value of px.
      // For example, if an element is 75px wide, then it is 2rem.
      rootValue: 37.5.propList: [The '*']}}}Copy the code

NPM run serve restart the project and check whether the PX becomes REM

5.3 introduced amfe – flexible

Import in SRC /main.js

import 'amfe-flexible'
Copy the code