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

本文主要是介绍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>