This article has participated in the Denver Nuggets Creators Camp 3 “More Productive writing” track, see details: Digg project | creators Camp 3 ongoing, “write” personal impact

preface

Learning without thought is useless; thought without learning is perilous. Some time ago to build a website, encountered several problems, today to find an event, recorded, to avoid next time again!

Questions and Solutions

1. Vue-cli scaffolding construction project

  1. Install nodejs
  2. Through the built-in NPM of Node, install taobao image CNPM
npm install -g cnpm --registry=https://registry.npm.taobao.org
Copy the code
  1. Install VUE – CLI through CNPM
cnpm install vue-cli -g
Copy the code

Enter vuE-v, the installation is successful if the version is displayed. 4. Create a project based on the WebPack template

vue init webpack xxx
Copy the code
  1. Go to the project directory and run the project
cd xxx
npm run dev
Copy the code

Note: During the installation process, data may be lost due to poor network, resulting in many error messages. You can enter CNPM instal in the project directory, which is the dependency file required by the installation project

The following information is displayed:

DONE  Compiled successfully in 5134ms
I  Your application is running here: http://localhost:8080
Copy the code

Successfully set up!

  1. Catalog Introduction:
  • Build: Webpack related configuration files (have been configured, generally do not need to configure)
  • Config: vue basic configuration file (can configure quiver port, pack output, etc.)
  • Node_modules: rely on
  • SRC: Project core file
  1. SRC /assets: static resources (such as CSS,less,sass, and some external JS files)
  2. SRC/Components: Common components
  3. App.vue: Root component *
  4. * main. Js: entry
  • Static: a purely static resource (usually an image class)
  • . Babelrc: sets parameters related to Babel compilation
  • . Editorconfig: Code format
  • .gitignore: file configuration to be ignored for git upload
  • Postcsrc. Js: a tool for converting CSS
  • * index.html: home page
  • Package. json: Basic project information
  • Readme. md: Project description

2. How to use Git to manage projects

  1. Install Git,

Git installation package download address https://git-scm.com/downloads

  1. Basic Information Settings

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

Note: After this setting, the Github repository home page shows who submitted the file

  1. On the project directory, initialize a new Git repository

git init

  1. Git git

Add git add.—– to the staging area

Git commit -m ‘description ‘—– commits files from staging to repository

Git status—–

  1. GIt manages remote repositories

The purpose of using remote repository: backup and centralized management of shared code

  • First, create the repository remotely,

As in making, after creating a warehouse address: https://github.com/xxx/xxxx.git

  • Next, in the local repository Settings (add remote repository), tell the local repository where your corresponding remote repository is.

Format: git remote add Remote name Remote address

Such as: git remote add webstoreAtGithub https://github.com/jCodeLife/webstore.git

  • You can then view the remote repository linked to the project by using the command:

Git remote lists all remote repositories connected to the current local repository

Git remote -v contains details

  • Next, synchronize the local repository to the Git remote repository (upload the code)

Git push -u branch name

Git push -u webstoreAtGithub master

Master indicates the default branch name

Origin indicates the default remote repository name

  • If you do not have a local repository, you can clone the remote repository locally by:

Git Clone repository address

  • Sometimes you need to pull the latest remote file, using

The git pull command

3. Why is the vUE route redirected normally but the page does not change

Requirement: Click the registration button, the registration page will be displayed

Problem: The address redirects normally, but the corresponding component is not displayed in the corresponding position, and no error is reported?

<router-link to='./sign_up'>
    <el-button type="danger" size="small">registered</el-button> 
</router-link>
<! -- Display position -->
<router-view></router-view>   
Copy the code

Solution: After repeated testing, an unobtrusive warning message was found:

[vue-router] Non-nested routes must include a leading slash character. Fix the following routes:…

Non-nested routines must contain a leading slash character.

So I changed the path in the definition of the routing path, solved successfully! That is, a slash character must be added before the path

Export default new Router({routes: [{path: '/sign_in', // original path: './sign_in', name: 'sign_in', Component: { template: `<h1>sign_in page</h1>` } ] })Copy the code

4. V-for :key error

And when I walk through the data, I find that

[Vue warn]: Avoid using non-primitive value as key, use string/number value inst….

Avoid using non-base values as keys. Use string/numeric values instead

Original error code

<div id="main">
    <div v-for="(v,k) in articles" :key="articles[k]" :name="k">
      <el-link href="#" target="_blank">{{articles[k].question}}</el-link>
      <br />
    </div>
  </div>
Copy the code

Found through practice:

In v-for traversal, an error is reported if the traversal is the value of :key and the value happens to be an object.

Solution:

You can either use the value of one of the items in this object as the key, or you can add index as the key during the loop

<div id="main">
    <div v-for="(v,k) in articles" :key="articles[k].number" :name="k">
      <el-link href="#" target="_blank">{{articles[k].question}}</el-link>
      <br />
    </div>
  </div>
Copy the code