前言

学而不思则罔，思而不学则殆。前段时间搭建一个网站，遇到了几个问题，今天找了个事件，记录下来，避免下次再犯！

问题与解答

1.vue-cli脚手架搭建项目

安装nodejs
通过node自带的npm，安装淘宝镜像cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

通过cnpm安装vue-cli

cnpm install vue-cli -g

安装输入：vue -V，出现版本表示安装成功 4. 创建基于webpack模板的项目

vue init webpack xxx

cd xxx
npm run dev

注意：在安装过程中可能网络不好导致数据丢失，造成很多报错信息，可以在项目目录输入：cnpm instal，安装项目所需要的依赖文件

运行会见到如下信息：

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

表示搭建成功！

build: webpack相关配置文件（都已经配置好，一般无需再配置）
config: vue基本的配置文件（可配置箭筒端口，打包输出等）
node_modules: 依赖
src: 项目核心文件

src/assets: 静态资源（如css,less,sass和一些外部js文件）
src/components: 公共组件
App.vue: 根组件*
main.js: 入口*

static: 纯静态资源（一般放置图片类）
.babelrc: babel编译相关参数设置
.editorconfig: 代码格式
.gitignore: git上传需要忽略的文件配置
.postcssrc.js: 转化css的工具
index.html: 主页*
package.json: 项目基本信息
README.md: 项目说明

2.如何使用git对项目进行管理

先安装 Git,

Git 安装包下载地址https://git-scm.com/downloads

基本信息设置 git config --global user.name "lbj" git config --global user.email "bingjin.liao@outlook.com"

注：该设置后，在github仓库主页显示谁提交了文件

在项目目录上，初始化一个新的Git仓库 git init
常用git命令

git add .-----添加到暂存区

git commit -m '描述'-----将文件从暂存区提交到仓库

git status-----来查看状态

GIt管理远程仓库

使用远程仓库的目的：备份、实现代码的共享集中化管理

首先，在远程创建对应仓库，如在github中创建，创建后出现一个仓库的地址：https://github.com/xxx/xxxx.git
接着，在本地仓库设置（添加远程仓库），告诉本地仓库你所对应的远程仓库在哪。

格式：git remote add 远程名称远程地址

如： git remote add webstoreAtGithub https://github.com/jCodeLife/webstore.git

然后，可以通过命令查看项目链接的远程仓库：

git remote 列出当前本地仓库所连接的所以远程仓库

git remote -v 会有详细信息

接着，将本地仓库同步到git远程仓库中（上传代码）

git push -u 远程名分支名

如：git push -u webstoreAtGithub master

master表示默认的分支名

origin 表示默认远程仓库名称

如果没有本地仓库，可以将将远程仓库克隆到本地，通过：

git clone 仓库地址

有时候需要拉取远程最新的文件，使用

git pull命令

3.为什么vue的路由正常跳转，但页面没有变化

需求：点击注册按钮时，显示出注册页面

问题：地址正常跳转，但对应组件在对应位置没显示、也没报错？

<router-link to='./sign_up'>
    <el-button type="danger" size="small">注册</el-button> 
</router-link>
<!--显示位置 -->
<router-view></router-view>

解决：通过反复测试，后面发现有一条不显眼的警告消息：

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

大概意思是：非嵌套路由必须包含一个前导斜杠字符。

于是我在在定义路由路径path处修改了一下，解决成功！即：在填写path时，前面需要将添加一个斜杠字符

export default new Router({
routes: [
    {
      path: '/sign_in',           //原本是path: './sign_in',
      name: 'sign_in',
      component: {
        template: `<h1>sign_in page</h1>`
     }
]
})

4.v-for中的:key报错了

在遍历数据的时候，发现

报错信息： [Vue warn]: Avoid using non-primitive value as key, use string/number value inst....

大概意思：避免使用非基值作为键，应使用字符串/数字值

原错误代码

<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>

经过实践发现：

在v-for遍历时，如果将遍历出来的值作为:key的值时，并且这个值恰巧是一个对象就会报错。

解决：

可以将该对象中的某一项的值作为key或者循环时添加index，将index作为key

<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>

遇到的两个小问题

前言

问题与解答

1.vue-cli脚手架搭建项目

2.如何使用git对项目进行管理

3.为什么vue的路由正常跳转，但页面没有变化

4.v-for中的:key报错了