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。

相关文章

Nginx设置连接超时并进行测试的方法步骤

Nginx设置连接超时并进行测试的方法步骤

《Nginx设置连接超时并进行测试的方法步骤》在高并发场景下,如果客户端与服务器的连接长时间未响应,会占用大量的系统资源,影响其他正常请求的处理效率,为了解决这个问题,可以通过设置Nginx的连接... 目录设置连接超时目的操作步骤测试连接超时测试方法：总结：设置连接超时目的设置客户端与服务器之间的连接
阅读更多...
Java中ArrayList和LinkedList有什么区别举例详解

Java中ArrayList和LinkedList有什么区别举例详解

《Java中ArrayList和LinkedList有什么区别举例详解》：本文主要介绍Java中ArrayList和LinkedList区别的相关资料,包括数据结构特性、核心操作性能、内存与GC影... 目录一、底层数据结构二、核心操作性能对比三、内存与 GC 影响四、扩容机制五、线程安全与并发方案六、工程
阅读更多...
部署Vue项目到服务器后404错误的原因及解决方案

部署Vue项目到服务器后404错误的原因及解决方案

《部署Vue项目到服务器后404错误的原因及解决方案》文章介绍了Vue项目部署步骤以及404错误的解决方案,部署步骤包括构建项目、上传文件、配置Web服务器、重启Nginx和访问域名,404错误通常是... 目录一、vue项目部署步骤二、404错误原因及解决方案错误场景原因分析解决方案一、Vue项目部署步骤
阅读更多...
mybatis和mybatis-plus设置值为null不起作用问题及解决

mybatis和mybatis-plus设置值为null不起作用问题及解决

《mybatis和mybatis-plus设置值为null不起作用问题及解决》Mybatis-Plus的FieldStrategy主要用于控制新增、更新和查询时对空值的处理策略,通过配置不同的策略类型... 目录MyBATis-plusFieldStrategy作用FieldStrategy类型每种策略的作
阅读更多...
Android 悬浮窗开发示例((动态权限请求 | 前台服务和通知 | 悬浮窗创建 )

Android 悬浮窗开发示例((动态权限请求 | 前台服务和通知 | 悬浮窗创建 )

《Android悬浮窗开发示例((动态权限请求|前台服务和通知|悬浮窗创建)》本文介绍了Android悬浮窗的实现效果,包括动态权限请求、前台服务和通知的使用,悬浮窗权限需要动态申请并引导... 目录一、悬浮窗 动态权限请求1、动态请求权限2、悬浮窗权限说明3、检查动态权限4、申请动态权限5、权限设置完毕后
阅读更多...
golang内存对齐的项目实践

golang内存对齐的项目实践

《golang内存对齐的项目实践》本文主要介绍了golang内存对齐的项目实践,内存对齐不仅有助于提高内存访问效率,还确保了与硬件接口的兼容性,是Go语言编程中不可忽视的重要优化手段,下面就来介绍一下... 目录一、结构体中的字段顺序与内存对齐二、内存对齐的原理与规则三、调整结构体字段顺序优化内存对齐四、内
阅读更多...
Go路由注册方法详解

Go路由注册方法详解

《Go路由注册方法详解》Go语言中,http.NewServeMux()和http.HandleFunc()是两种不同的路由注册方式,前者创建独立的ServeMux实例,适合模块化和分层路由,灵活性高... 目录Go路由注册方法1. 路由注册的方式2. 路由器的独立性3. 灵活性4. 启动服务器的方式5.
阅读更多...
浅析如何使用Swagger生成带权限控制的API文档

浅析如何使用Swagger生成带权限控制的API文档

《浅析如何使用Swagger生成带权限控制的API文档》当涉及到权限控制时,如何生成既安全又详细的API文档就成了一个关键问题,所以这篇文章小编就来和大家好好聊聊如何用Swagger来生成带有... 目录准备工作配置 Swagger权限控制给 API 加上权限注解查看文档注意事项在咱们的开发工作里，API
阅读更多...
SpringBoot+MyBatis-Flex配置ProxySQL的实现步骤

SpringBoot+MyBatis-Flex配置ProxySQL的实现步骤

《SpringBoot+MyBatis-Flex配置ProxySQL的实现步骤》本文主要介绍了SpringBoot+MyBatis-Flex配置ProxySQL的实现步骤,文中通过示例代码介绍的非常详... 目录 目标 步骤 1：确保 ProxySQL 和 mysql 主从同步已正确配置ProxySQL 的
阅读更多...
Python创建Excel的4种方式小结

Python创建Excel的4种方式小结

《Python创建Excel的4种方式小结》这篇文章主要为大家详细介绍了Python中创建Excel的4种常见方式,文中的示例代码简洁易懂,具有一定的参考价值,感兴趣的小伙伴可以学习一下... 目录库的安装代码1——pandas代码2——openpyxl代码3——xlsxwriterwww.cppcns.c
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2