01-vuePC端项目(项目搭建,上传到github托管,生成公私钥,项目要在src下创建的文件夹,全局样式的设置,npm下载包-D与-S的区别,简单配置一下基础路由)

2024-03-14 04:48
文章标签 配置 设置 全局 项目 文件夹 创建 路由 搭建 生成 区别 npm 01 下载 托管 样式 src github 传到 公私 vuepc

本文主要是介绍01-vuePC端项目(项目搭建,上传到github托管,生成公私钥,项目要在src下创建的文件夹,全局样式的设置,npm下载包-D与-S的区别,简单配置一下基础路由)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

黑马面面(vuePC端项目)

主要就是后台管理系统

01-项目创建:

01-1、就跟之前一样,安装脚手架(前面也有写也都做过,这里粗略写一下)
       a.参考地址:https://cli.vuejs.org/zh/guide/installation.html
       b.npm install -g @vue/cli
       c.检查是否安装成功:vue-vesion

01-2、使用脚手架创建项目
       a.参考地址:https://cli.vuejs.org/zh/guide/creating-a-project.html
       b.建议：把项目不要放在中文目录或是特殊字符的目录下（最好放在桌面）
       c.vue create heimamm
01-3、接下来选择default按回车即可
01-4、运行刚刚生成的项目npm run serve

02-把项目交给github托管:

把本地的项目推送到我们创建的远程github仓库
02-1、在github上创建一个远程仓库叫做 heimamm
        (不要勾那个带readme文件的,也不要选择.gitignore,因为刚用脚手架生成的项目已经有了)
02-2、本地项目文件有一个.git,文件就是我们的本地仓库,每次把本地从仓库中更改的代码，做一次提交
        git add .
        git commit -m “1-初始化了项目”
02-3、建立本地仓库与github远程仓库 heimamm的关系
       参考(里面都是一些git命令)：git指令地址参考: 直通车.
       指令:git remote add origin git@github.com:tangyali78/heimamm.git(这个是用ssh的)
       或者git remote add origin https://github.com/tangyali78/heimamm.git(这个是用HTTP的)
02-4、尝试把本地项目推送到github上面,命令:git push -u origin master,它可能会出现问题
见下图,因为我在创建远程仓库时最后面创建的时候选择了Add a license:MIT License,所以导致远程仓库那里会有一个License文件,要先pull拉取下来才行



在这里插入图片描述


2-5、先把远程仓库的文件先pull下来命令: git pull origin master --allow-unrelated-histories
它会弹出一个编辑框，如何退出:先按住esc，然后再按住 :q
2-6、再次 push,git push -u origin master,第一次必须接上 -u origin master,因为必须跟github进行第一次推送确认，以后只需要执行 git push即可
2-7注意：
    a、如果你想更改远程仓库的地址,先执行git remote remove origin(删除与远程仓库的联系),再git remote add origin git@github.com:tangyali78/heimamm.git或者git remote add origin https://github.com/tangyali78/heimamm.git(重新建立与远程仓库的联系)
    b、git remote是查看远程仓库的信息,git remote -v查看远程仓库的版本及地址
    c、以上所有的git指令，必须在 git bash 终端里面操作，普通的cmd终端是没有git指令的
    d、如果我们项目中的 .git 文件没有了，我们为了让我们本地的代码被git管理起来，那么我们就只需要执行一个指令 git init，那么就会在我们项目中生成一个本地的仓库，并且将来去管理我们本地项目
    e、克隆github仓库的时候【我们只clone，不做pull和push】（不管是别人的还是我们自己的）
    f、把代码提交到github仓库的时候【push/pull】, 使用 https://github.com/vuejs/vue.git,全世界都有权限clone,但是只有 尤雨溪 以及它的团队才能push，并且要输入用户名密码,使用 git@github.com:vuejs/vue.git, 只有 尤雨溪 以及它的团队才能push，这个时候就不是使用输入用户名和密码，得配置 ssh 公私钥(全世界都能push vue怎么可能!)

03-ssh公私钥:

03-1、如果你的老大给你的git地址是以 git@github.com/gitlab…，这个时候你不能通过用户名和密码访问
03-2、只有以https开头的，才能使用用户名和密码访问
03-3、作用：替代用户名和密码，来完成权限校验,好处：避免密码丢失之后找回的问题,
比如你的产品经理跟你说:请把你的ssh公钥给我,我给你配置一个咱们公司git仓库的访问权限,这时他就会把你给他的公钥放在github后台里去,到时候你就可以凭着自己电脑c盘下的用户下的Administrator下的密钥(公钥后缀是.pub)来配对,能配对上就可以访问了
03-4、ssh里面涉及到一个算法，RSA算法，有两把钥匙，一把公钥，一把叫做私钥，注意：他们是成对使用的
私钥加密，公钥解密
03-5、RSA,非对称加密算法:http://www.ruanyifeng.com/blog/2013/06/rsa_algorithm_part_one.html
03-6、生成了ssh的公私钥之后，如何使用: 私钥留在你本地电脑上,公钥要上传到github后台

04-生成sshkey所需要的公私钥

03-1、生成到哪里? 它会生成到你window的 c:/Users/.ssh
03-2、如何生成?其实就是去 参考地址： github后台地址直通车: link.
03-3、步骤
a、终端输入：ssh-keygen -t rsa -b 4096 -C “your_email@example.com” 改正好之后按回车
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述
b、连按三次回车
c、去到.ssh目录下(在电脑c盘下的用户下的Administrator下.ssh文件夹下)
d、拷贝公钥的内容,公钥是叫 id_rsa.pub的文件,私钥是叫 id_rsa的文件也可以进入那个.ssh文件夹下在git bash小黑框中输入命令cat id_ras.pub出现公钥然后复制到待会要输入公钥的地方
e、进入到github.com后台，设置公钥的地方
f、新添加一个公钥,见图,title随便写
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
g、验证是否配置ok,git bash 中输入ssh -T git@github.com，输完之后第一次需要输入YES
参考如图:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
h、如果看到 Hi Duanzihuang! You’ve successfully authenticated, but GitHub does not provide shell access. 就代表成功了

05-创建项目必要的文件或是文件夹

src下文件夹下的views页面组件assests图片plugins存放 ElementUI 配置的地方router路由stroestyles

06-全局样式的设置

可以在main.js中引入也可以在App.vue中引入
如果项目中引入了less、scss等文件，必须安装相应的包,webpack才能正确转化我们 less、scss的语法
06-1.如果有less文件
就要下载less less-loader包(这里的loader可以理解成加载器的意思)
命令npm i less less-loader -D
06-2.如果有scss文件
命令node-sass sass-loader

07-包相关

包出了问题，比如上面一步下载less跟less-loader或者vue-router时一直卡死如何解决？
07-1、把 node_modules 干掉
07-2、把缓存目录干掉 C:/Users/xxx/AppData/Roming/npm_cache这个文件夹
07-3、把项目根目录下面的 package-lock.json 干掉
07-4、切换镜像 npm config set registry https://registry.npmjs.org/(这是npm原本的)
07-5、npm i,因为把node-modules删掉了嘛要根据这个下载
07-6、安装包时候 -S 和 -D的区别: 以 less 和 vue-router为例:
                 npm i less less-loader -D
                 npm i vue-router -S(不写这个S就是默认加了S也就是说默认是属于生产依赖包)
在这里插入图片描述

08-配置好路由规则:

08-1、安装包
npm i vue-router -S
08-2、在 src/router 中创建一个 index.js，里面写好配置的内容

import Vue from 'vue'
import VueRouter from 'vue-router'Vue.use(VueRouter);// login文件夹下是index.js.所以下面导入的时候选到文件夹这里就行了,会自动选中index.js文件
import login from "@/views/login";
import layout from "@/views/layout";const router = new VueRouter({routes: [{path: '/login',component: login},{path: '/layout',component: layout},{path: '/',redirect: '/login'}]
});export default router;

08-3、在main.js中引入并且挂载

import Vue from 'vue'
import App from './App.vue'Vue.config.productionTip = false// webpack会让main.js这个入口文件和.less建立依赖联系
// 在vue脚手架中js文件里面 @ === src 的意思
// import '@/styles/base.less'import router from '@/router';new Vue({render: h => h(App),router
}).$mount('#app')

08-4、在 App.vue 中设置 router-view

<template><div><router-view></router-view></div>
</template><script>export default {name:'App'
}
</script><style lang="less">
//以下两种导入全局样式都可以,这里的@就不是代表src了要用~@
// @import url('~@/styles/base.less');
@import './styles/base.less';</style>

这篇关于01-vuePC端项目(项目搭建,上传到github托管,生成公私钥,项目要在src下创建的文件夹,全局样式的设置,npm下载包-D与-S的区别,简单配置一下基础路由)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/807239。

相关文章

Zookeeper安装和配置说明

Zookeeper安装和配置说明

一、Zookeeper的搭建方式 Zookeeper安装方式有三种，单机模式和集群模式以及伪集群模式。 ■ 单机模式：Zookeeper只运行在一台服务器上，适合测试环境； ■ 伪集群模式：就是在一台物理机上运行多个Zookeeper 实例； ■ 集群模式：Zookeeper运行于一个集群上，适合生产环境，这个计算机集群被称为一个“集合体”（ensemble） Zookeeper通过复制来实现
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
CentOS7安装配置mysql5.7 tar免安装版

CentOS7安装配置mysql5.7 tar免安装版

一、CentOS7.4系统自带mariadb # 查看系统自带的Mariadb[root@localhost~]# rpm -qa|grep mariadbmariadb-libs-5.5.44-2.el7.centos.x86_64# 卸载系统自带的Mariadb[root@localhost ~]# rpm -e --nodeps mariadb-libs-5.5.44-2.el7
阅读更多...
hadoop开启回收站配置

hadoop开启回收站配置

开启回收站功能，可以将删除的文件在不超时的情况下，恢复原数据，起到防止误删除、备份等作用。 开启回收站功能参数说明 （1）默认值fs.trash.interval = 0，0表示禁用回收站；其他值表示设置文件的存活时间。 （2）默认值fs.trash.checkpoint.interval = 0，检查回收站的间隔时间。如果该值为0，则该值设置和fs.trash.interval的参数值相等。
阅读更多...
NameNode内存生产配置

NameNode内存生产配置

Hadoop2.x 系列，配置 NameNode 内存 NameNode 内存默认 2000m ，如果服务器内存 4G ， NameNode 内存可以配置 3g 。在 hadoop-env.sh 文件中配置如下。 HADOOP_NAMENODE_OPTS=-Xmx3072m Hadoop3.x 系列，配置 Nam
阅读更多...
如何用Docker运行Django项目

如何用Docker运行Django项目

本章教程，介绍如何用Docker创建一个Django，并运行能够访问。 一、拉取镜像 这里我们使用python3.11版本的docker镜像 docker pull python:3.11 二、运行容器 这里我们将容器内部的8080端口，映射到宿主机的80端口上。 docker run -itd --name python311 -p
阅读更多...
AI一键生成 PPT

AI一键生成 PPT

AI一键生成 PPT 操作步骤 作为一名打工人，是不是经常需要制作各种PPT来分享我的生活和想法。但是，你们知道，有时候灵感来了，时间却不够用了！😩直到我发现了Kimi AI——一个能够自动生成PPT的神奇助手！🌟 什么是Kimi？ 一款月之暗面科技有限公司开发的AI办公工具，帮助用户快速生成高质量的演示文稿。 无论你是职场人士、学生还是教师，Kimi都能够为你的办公文
阅读更多...
wolfSSL参数设置或配置项解释

wolfSSL参数设置或配置项解释

1. wolfCrypt Only 解释：wolfCrypt是一个开源的、轻量级的、可移植的加密库，支持多种加密算法和协议。选择“wolfCrypt Only”意味着系统或应用将仅使用wolfCrypt库进行加密操作，而不依赖其他加密库。 2. DTLS Support 解释：DTLS（Datagram Transport Layer Security）是一种基于UDP的安全协议，提供类似于
阅读更多...
常用的jdk下载地址

常用的jdk下载地址

jdk下载地址 安装方式可以看之前的博客： mac安装jdk oracle 版本：https://www.oracle.com/java/technologies/downloads/ Eclipse Temurin版本：https://adoptium.net/zh-CN/temurin/releases/ 阿里版本： github：https://github.com/
阅读更多...
【Python编程】Linux创建虚拟环境并配置与notebook相连接

【Python编程】Linux创建虚拟环境并配置与notebook相连接

1.创建 使用 venv 创建虚拟环境。例如，在当前目录下创建一个名为 myenv 的虚拟环境： python3 -m venv myenv 2.激活 激活虚拟环境使其成为当前终端会话的活动环境。运行： source myenv/bin/activate 3.与notebook连接 在虚拟环境中，使用 pip 安装 Jupyter 和 ipykernel： pip instal
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2