Vue+Webpack构建移动端京东金融(一、开发前准备)
一、开发前准备
1.node环境搭建
去node.js官网下载长期支持版本的node,采用全局安装,安装方式自行百度
安装后在cmd命令行运行如下代码,若返回版本信息则说明安装成功
1
|
node - v |
2.GitHub创建-码云
整个项目通过码云来托管代码,用到的工具是Git。
2.1.创建码云账号
进入码云官网,注册一个码云账号
2.2.创建一个git仓库
创建一个名为jd-finance的项目仓库,注意:最新版本的vue不支持创建大写名称的项目:
2.3.配置本地git环境
去git官网下载git并安装,安装方式自行百度
安装后运行git的命令行工具Git Bash,运行如下命令检测版本信息:
1
|
git --version |
配置git用户名称和邮箱,这样做很重要,因为每一个 Git 的提交都会使用这些信息,并且它会写入到你的每一次提交中,不可更改:
1
2
|
git config --global user.name "ashan" git config --global user.email 14718061295@163.com |
2.4.生成本地ssh公钥
git bash运行以下命令,生成本地ssh公钥,双引号内为邮箱:
1
|
ssh -keygen -t rsa -C "14718061295@163.com" |
git bash运行以下命令,查看ssh公钥:
1
|
cat ~/. ssh /id_rsa .pub |
2.5.将本地ssh公钥添加到码云
将2.4生成的ssh公钥添加到线上仓库
3.将项目下载到本地
在本地创建一个vueProject文件夹,git bash进入到此文件夹,运行以下命令,将项目下载到本地
git clone git@gitee.com:***/jd-finance.git
项目地址 从你的仓库中克隆,相应更改,如图:
4. 用vue-cli初始化vue+webpack项目
4.1.安装vue脚手架工具
npm install -g @vue/cli
4.2.创建vue项目
进入到vue项目文件夹,创建vue项目(同时安装webpack依赖)
cd vueProject
vue init webpack jd-finance
在安装选项中选择 2 (merge)
安装完成后,运行:
cd jd-finance/
npm run dev
在浏览器中访问:http://localhost:8080,出现如下界面,说明项目创建成功:
4.3.将项目上传到码云
gid add .
git commit -m 'project init initialized'
git push
5.项目结构初始化
5.1项目结构更改
home.vue
router > index.vue
App.vue
更改完成后保存,npm run dev启动项目,访问http://localhost:8080,出现如下结果,说明项目结构初始化完成
----------------章节一 完结----------------
Vue+Webpack构建移动端京东金融(一、开发前准备)的更多相关文章
- Vue+Webpack构建去哪儿APP_一.开发前准备
一.开发前准备 1.node环境搭建 去node.js官网下载长期支持版本的node,采用全局安装,安装方式自行百度 网址:https://nodejs.org/zh-cn/ 安装后在cmd命令行运行 ...
- Vue+webpack构建一个项目
1.安装CLI命令的工具 推荐用淘宝的镜像 npm install -g @vue/cli @vue/cli-init 2.使用命令构建一个名为myapp的项目 vue init webpack m ...
- vue+webpack构建项目
概述 -- 项目中会用到的插件 vue-router vue-resource 打包工具 webpack 依赖环境 node.js start 安装vue开发的模板 # 全局安装 vue-cli $ ...
- 更新到@vue/cli 4.1.1版本的前端开发前的准备
一.概念简述 1.node.js目的是提供一个JS的运行环境. 2.npm(node package manager)是一个JS包管理器. 二.检查自己的电脑是否已安装相关配置 1.查看node.js ...
- 为什么vue+webpack需要用到node,如何部署项目到服务器?
第一部分 之前一直不太理解为什么要使用vue+webapck,还有在使用了vue-cli之后会用到后台,即vue-cli自动帮我们安装了express服务器,在本地服务器上运行,因为我们希望可以模拟在 ...
- 从零开始搭建Electron+Vue+Webpack项目框架,一套代码,同时构建客户端、web端(一)
摘要:随着前端技术的飞速发展,越来越多的技术领域开始被前端工程师踏足.从NodeJs问世至今,各种前端工具脚手架.服务端框架层出不穷,“全栈工程师”对于前端开发者来说,再也不只是说说而已.在NodeJ ...
- 【原创】从零开始搭建Electron+Vue+Webpack项目框架(六)Electron打包,同时构建客户端和web端
导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更 ...
- 【原创】从零开始搭建Electron+Vue+Webpack项目框架,一套代码,同时构建客户端、web端(二)
摘要:上篇文章说到了如何新建工程,并启动一个最简单的Electron应用.“跑起来”了Electron,那就接着把Vue“跑起来”吧.有一点需要说明的是,webpack是贯穿这个系列始终的,我也是本着 ...
- 全栈前端入门必看 koa2+mysql+vue+vant 构建简单版移动端博客
koa2+mysql+vue+vant 构建简单版移动端博客 具体内容展示 开始正文 github地址 <br/> 觉得对你有帮助的话,可以star一下^_^必须安装:<br/> ...
随机推荐
- Boost - 从Coroutine2 到Fiber
Boost - 从Coroutine2 到Fiber 协程引子 我开始一直搞不懂协程是什么,网上搜一搜,(尤其是Golang的goroutine)感觉从概念上听起来有点像线程池,尤其是类似Java的E ...
- 使用ScheduledThreadPoolExecutor执行定时任务
ScheduledThreadPoolExecutor scheduled = new ScheduledThreadPoolExecutor(2); scheduled.scheduleAtFixe ...
- centos7 网卡识别为eth0 eth1
使网卡识别为 eth0 方法一.安装系统是,net.ifnames=0 biosdevname=0 方法二.(没有测试): 修改网卡配置文件中的 DEVICE= 参数的关于 eth0 [root@an ...
- mybatis映射文件#与$的使用,及参数传入规则
mybaits映射文件中使用#与$场景: <select id="getProviders" resultType="com.lazy.bill.pojo.Prov ...
- 关于 early Z 与 z-prepass
今天在考虑优化MOBA项目中的树木时(采用了ALPHATEST)时,与同事讨论中深入了解了这两个概念. 以前居然不知道有early z的存在,真是惭愧.... 上个链接: 深入剖析GPU Early ...
- Druid中配置双数据库
配置如下 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://w ...
- 有关于并发中的死锁(Deadlock)、饥饿(Starvation)、活锁(Livelock)
最近在看<实战Java高并发程序设计>,发现了之前没有接触过的几个名词. 死锁:之前在接触多线程的时候,接触过死锁的情况.死锁是线程中最糟糕的情况,如下面的图中的四辆车子一样,如果没有一辆 ...
- 2018/12/22:centos中转换目录时/root的影响
今天在将一个压缩包复制到/root下,并解压.从表面看我试在根目录下,但是就是不能进入生成的目录,提示no such file or diraction.最后我加上/root又好了,奇怪 编译环境:输 ...
- html跳动的心实现代码
<style> .box{ width: 200px; height: 400px; positio ...
- 如何利用webpack4.0搭建一个vue项目
作为一个初学者,记录自己踩过的坑是个好的习惯.我本身比较懒,这里刚好有时间把自己的搭建过程记录一下这里是参考文章 https://www.jianshu.com/p/1fc5b5151abf文章里 ...