vue2+js项目从0-1，含git详情

扶园

已于 2024-02-02 13:59:32 修改

阅读量173

点赞数

文章标签： vue.js 前端 javascript

于 2023-11-01 23:44:57 首次发布

本文链接：https://blog.csdn.net/fy1879047121/article/details/132796355

版权

一、创建项目

1.输入下面的命令

vue create 项目文件名  //项目文件名注意不要用大写

2.自己配置功能

3.用空格来选择和取消

4.选择vue2的版本

5.这里路由模式它默认history,需要hash就输入n

6.选择css语言

7.这里是选择配置文件要不要单独放

8.这些配置要不要保存,默认不保存

9.跟着提示

cd 你的项目名
yarn serve   //或npm run serve

10.此时你就成功创建了一个vue2的项目,在地址栏粘贴地址后看到

11.项目logo如果需要自定义的话,把项目根目录public下的favicon.ico替换为你的就好了

二、连接git仓库

1.在gitee上新建仓库

2.进入本地项目所在文件夹，执行以下命令

//初始化git
git init

//将项目的所有文件添加到暂存区
git add .

//将暂存区中的变化提交到本地仓库
git commit -m "这里是描述"

//设置仓库的远程地址
git remote add origin 你的Gitee仓库地址

//直接执行push的话远程仓库原有的文件没有pull到本地仓库会导致冲突,所以先执行这个pull
git pull --rebase origin master

//将本地代码推送到远程仓库就完成git连接了
git push -u origin master

//这里仅是个人笔记
//为了代码的安全性,连接成功后创建并切换分支
git checkout -b dev

git add .
git commit -m "描述"
git pull origin master//第一次这里就不需要pull了,因为已经是最新的了,保险起见pull一下
git push origin dev

//合并分支
git checkout master
git merge dev
git push

//合并之后记得切换回自己的分支
git checkout dev


//备注:
//查看分支
git branch
//查看远程git连接
git remote -v
//取消与远程仓库的连接
git remote remove origin
//git提交忽略eslint校验
git commit -m '描述' --no-verify

三、简单配置项目目录

四、配置路由

1.分析路由,可以把路由记录下来便于后期管理

2.新建相应页面

3.在router文件下的index.js里配置路由

import Vue from "vue";
import VueRouter from "vue-router";
import Login from "@/views/login/index.vue";
import Layout from "@/views/layout/index.vue";
import { Message } from "element-ui";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    component: Login,
  },
  {
    path: "/layout",
    component: Layout,
  },
  //首页
  {
    path: "/home",
    component: Layout,
    redirect: "/",
    children: [
      {
        path: "/home",
        component: () => import("@/views/home/index.vue"),
        meta: { title: "首页" },
      },
    ],
  },
  //商品
  {
    path: "/goods",
    component: Layout,
    redirect: "/goods/goods-list",
    meta: { title: "商品管理" },

    children: [
      {
        path: "/goods/goods-list",
        component: () => import("@/views/goods/index.vue"),
        meta: { title: "商品列表" },
      },
      {
        path: "/goods/goods-add",
        component: () => import("@/views/goods/goodsAdd.vue"),
        meta: { title: "新增商品" },
      },
    ],
  },
  //学生
  {
    path: "/student",
    component: Layout,
    redirect: "/student/student-list",
    meta: { title: "学生管理" },
    children: [
      {
        path: "/student/student-list",
        component: () => import("@/views/student/index.vue"),
        meta: { title: "学生列表" },
      },
      {
        path: "/student/student-add",
        component: () => import("@/views/student/studentAdd.vue"),
        meta: { title: "新增学生" },
      },
    ],
  },
  {
    path: "*",
    component: () => import("@/views/err404/index.vue"),
  },
];

const router = new VueRouter({
  routes,
});

// 路由自己跳自己要报错 解决
// 获取原型对象push函数
const originalPush = VueRouter.prototype.push;
// 获取原型对象replace函数
const originalReplace = VueRouter.prototype.replace;
// 修改原型对象中的push函数
VueRouter.prototype.push = function push(location) {
  return originalPush.call(this, location).catch((err) => err);
};
// 修改原型对象中的replace函数
VueRouter.prototype.replace = function replace(location) {
  return originalReplace.call(this, location).catch((err) => err);
};

// 全局前置路由守卫
// router.beforeEach((to, from, next) => {
//   if (to.path == "/") {
//     next();
//   } else {
//     let token = localStorage.getItem("token");
//     if (!token) {
//       Message.error("请先登录");
//       next("/");
//     } else {
//       next();
//     }
//   }
// });

export default router;