一、开发前准备

1.node环境搭建

去node.js官网下载长期支持版本的node,采用全局安装,安装方式自行百度

网址:https://nodejs.org/zh-cn/

安装后在cmd命令行运行如下代码,若返回版本信息则说明安装成功

1
node -v

  

2.GitHub创建-码云

整个项目通过码云来托管代码,用到的工具是Git。

2.1.创建码云账号

进入码云官网,注册一个码云账号

网址:https://gitee.com/

2.2.创建一个git仓库

创建一个名为jd-finance的项目仓库,注意:最新版本的vue不支持创建大写名称的项目:

2.3.配置本地git环境

去git官网下载git并安装,安装方式自行百度

网址:https://git-scm.com/

安装后运行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构建移动端京东金融(一、开发前准备)的更多相关文章

  1. Vue+Webpack构建去哪儿APP_一.开发前准备

    一.开发前准备 1.node环境搭建 去node.js官网下载长期支持版本的node,采用全局安装,安装方式自行百度 网址:https://nodejs.org/zh-cn/ 安装后在cmd命令行运行 ...

  2. Vue+webpack构建一个项目

    1.安装CLI命令的工具  推荐用淘宝的镜像 npm install -g @vue/cli @vue/cli-init 2.使用命令构建一个名为myapp的项目 vue init webpack m ...

  3. vue+webpack构建项目

    概述 -- 项目中会用到的插件 vue-router vue-resource 打包工具 webpack 依赖环境 node.js start 安装vue开发的模板 # 全局安装 vue-cli $ ...

  4. 更新到@vue/cli 4.1.1版本的前端开发前的准备

    一.概念简述 1.node.js目的是提供一个JS的运行环境. 2.npm(node package manager)是一个JS包管理器. 二.检查自己的电脑是否已安装相关配置 1.查看node.js ...

  5. 为什么vue+webpack需要用到node,如何部署项目到服务器?

    第一部分 之前一直不太理解为什么要使用vue+webapck,还有在使用了vue-cli之后会用到后台,即vue-cli自动帮我们安装了express服务器,在本地服务器上运行,因为我们希望可以模拟在 ...

  6. 从零开始搭建Electron+Vue+Webpack项目框架,一套代码,同时构建客户端、web端(一)

    摘要:随着前端技术的飞速发展,越来越多的技术领域开始被前端工程师踏足.从NodeJs问世至今,各种前端工具脚手架.服务端框架层出不穷,“全栈工程师”对于前端开发者来说,再也不只是说说而已.在NodeJ ...

  7. 【原创】从零开始搭建Electron+Vue+Webpack项目框架(六)Electron打包,同时构建客户端和web端

    导航: (一)Electron跑起来(二)从零搭建Vue全家桶+webpack项目框架(三)Electron+Vue+Webpack,联合调试整个项目(四)Electron配置润色(五)预加载及自动更 ...

  8. 【原创】从零开始搭建Electron+Vue+Webpack项目框架,一套代码,同时构建客户端、web端(二)

    摘要:上篇文章说到了如何新建工程,并启动一个最简单的Electron应用.“跑起来”了Electron,那就接着把Vue“跑起来”吧.有一点需要说明的是,webpack是贯穿这个系列始终的,我也是本着 ...

  9. 全栈前端入门必看 koa2+mysql+vue+vant 构建简单版移动端博客

    koa2+mysql+vue+vant 构建简单版移动端博客 具体内容展示 开始正文 github地址 <br/> 觉得对你有帮助的话,可以star一下^_^必须安装:<br/> ...

随机推荐

  1. [python爬虫] Selenium常见元素定位方法和操作的学习介绍

    这篇文章主要Selenium+Python自动测试或爬虫中的常见定位方法.鼠标操作.键盘操作介绍,希望该篇基础性文章对你有所帮助,如果有错误或不足之处,请海涵~同时CSDN总是屏蔽这篇文章,再加上最近 ...

  2. linux挂载硬盘分区

    [转]https://www.jb51.net/article/138204.htm 基本步骤:分区——格式化——挂载——写入文件 1.使用fdisk    -l命令查看添加的硬盘名称,可以看到sdb ...

  3. nodeJs 使用 express-http-proxy 转发请求

    开发过程中经常需要用到 nodeJs做转发层 使用express配合 express-http-proxy 可以轻松的完成转发 使用过程: 安装 express-http-proxy npm inst ...

  4. python学习笔记---环境的安装,pip命令,数据类型,运算

    1.进入python环境: python 2:py -2 python 3:py -3 2.退出python环境 exit()/quit()/ctrl+z+enter ctrl+z+enter没有尝试 ...

  5. swift-UIPickerView(选择控件)

    import UIKit //UIPickerView 的委托协议是 UIPickerViewDelegate,数据源是 UIPickerViewDataSource.我们需要在视图控制器中声明实现 ...

  6. python 使用多进程打开多个cmd窗口,并在子进程结束之后关闭cmd窗口

    额,我想表达的是使用os.system()打开另一个可执行文件,然后等待其结束,关闭cmd窗口 主要是我突发奇想想装逼; 如果只是用multiprocessing库的多进程,然后输出信息的话,根本没法 ...

  7. Java8内置的函数式接口

    JDK 1.8 API 包含了很多内置的函数式接口.其中就包括我们在老版本中经常见到的 Comparator 和 Runnable,Java 8 为他们都添加了 @FunctionalInterfac ...

  8. vue 自定义组件使用v-model(组件通信方式1)

    父组件通过v-model传递值给子组件时,会自动传递一个value的prop属性,在子组件中通过this.$emit(‘input’,val)自动修改父组件v-model绑定的值 child: < ...

  9. h5-上传图片预览

    <div class="content_sq" style="position:relative;"> <img src="imag ...

  10. phpstudy设置允许远程访问mysql数据库

    1.先在服务器中通过命令行方式(打开phpstudy界面->右下角其他菜单选项->MySQL工具->MySQL命令行) 登录mysql:mysql   -u root -p 密码 ( ...