Vue 环境的搭建
话不多说,直入话题
本文涉及Node.js 、 git、云仓库(这里的云仓库指的是码云)、win10
首先讲讲Node.js的作用
我不会说node.js是基于V8引擎的JavaScript运行环境,也不会告诉你node.js使用事件驱动、什么非阻塞I/O,什么轻量级,高并发等等优点,我只会告诉你node里面有一个东西叫做【npm】的包管理工具。
首先,你得会安装Node.js
目前最新版本 10.10.0
稳定版本 8.12.0
你安装完毕后在CMD里面输入node -v
指令,如果弹出像下图那样类型的字符,恭喜你,node安装成功
然后再输入npm -v
指令检查npm -v
是否有npm的这东东,如果显示如下图即可
Node.js 与 npm的关系
包含关系,nodejs中含有npm,比如说你安装好nodejs,你打开cmd输入npm -v会发现出啊线npm的版本号,说明npm已经安装好。
其实npm是nodejs的包管理器(package manager)。我们在Node.js上开发时,会用到很多别人已经写好的javascript代码,如果每当我们需要别人的代码时,都根据名字搜索一下,下载源码,解压,再使用,会非常麻烦。于是就出现了包管理器npm。大家把自己写好的源码上传到npm官网上,如果要用某个或某些个,直接通过npm安装就可以了,不用管那个源码在哪里。并且如果我们要使用模块A,而模块A又依赖模块B,模块B又依赖模块C和D,此时npm会根据依赖关系,把所有依赖的包都下载下来并且管理起来。试想如果这些工作全靠我们自己去完成会多么麻烦!
创建一个云端仓库
第二部就是去网上创建一个仓库,用于存放你的项目,作者是用马云,噢打错,是码云
创建账号这种操作就不用多说了,当你创建好了一个账号,你点击下面的①项目,②然后选择Private,第三点击这个加号
点击成功然后就开始创建一个私人的云仓库,具体如下图
创建成功后一般有两个文件,
其中
License 阐述项目采用何种开源协议
Readme.md是用于本地Git启动项目的基本配置
把密钥先复制好,接下来会用到
配置云端仓库的钥匙
仓库已经创建好了,不过是在云端,现在我们需要把它拿到本地上来,这里就涉及SSH公钥的设置,主要的作用是用在云端和本地上传工具的识别
点击右上角的管理,找到左侧的部署公钥管理,选择添加公钥
问题来了,公钥怎么生成?
因为本地连接到云端的仓库是依赖git的,所以,公钥的生成就要用到git界面
回到桌面,右键鼠标,打开Git Bash Here
输入指令 ssh-keygen -t rsa -C "[email protected]"
例如:ssh-keygen -t rsa -C "[email protected]"
, 然后连续按三次回车
再输入cat ~/.ssh/id_rsa.pub
即可查看生成的 publick key
把public key 的内容复制,粘贴到公钥框里面,点击生成即可
打开Git Bash Here 输入指令 git clone + ssh密钥
然后就可以把云仓库里面的文件down下来了,接下来继续在Git Bash Here 里面输入
npm install --global vue-cli
//安装vue-cli
切换目录,接下来要初始化文件,默认会把所有初始化文件存放在
当前文件夹里面 ,然后输入以下命令,记住,my-project表示的是你要存放的文件的名称
vue init webpack my-project
然后按照提示选择
Target directory exists. Continue? (Y/n) y --项目文件夹已经存在
Project name (Alibaba/) Alibaba --项目名称
Project description (A Vue.js project) –项目描述 这里直接回车
Author hikebao --作者
Vue build (Use arrow keys) Runtime + Compiler: recommended for most users –回车选择默认
Install vue-router? (Y/n) Y --构建vue路由
Use ESLint to lint your code? (Y/n) n --使用语法检测
Set up unit tests (Y/n) n --设置单元测试
Setup e2e tests with Nightwatch? (Y/n) n –设置端到端测试
Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys) Yes, use NPM –-使用npm的包管理工具
进入当前项目的文件夹
Cd + 文件夹路径 ex: cd Alibaba
然后输入
npm run start
启动项目
到此已经把vue的项目搭建好了
最后一步就是把项目里面的内容上传到码云
按下Ctrl + c 暂停服务器
然后依次输入
Git add .
--把当前本地的文件缓冲到内存
Git commit
--m ‘这里是更新描述‘
Git push
--把项目上传到码云
下面是一些常用的git命令
删除云端数据,本地不受影响
Git rm –-cached
--需要删除的文件名 ex : git rm –-cached build
Git commit –m ‘操作描述’
--ex:git commit -m ‘Delete build file’
Git push
--把修改更新到服务端
.
.
.
.
.