一、开发前准备

1.node环境搭建

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

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

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

node -v

  

2.GitHub创建-码云

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

2.1.创建码云账号

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

网址:https://gitee.com/

2.2.创建一个git仓库

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

2.3.配置本地git环境

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

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

安装后运行git的命令行工具Git Bash,运行如下命令检测版本信息:

git --version

配置git用户名称和邮箱,这样做很重要,因为每一个 Git 的提交都会使用这些信息,并且它会写入到你的每一次提交中,不可更改:

git config --global user.name "ashan"
git config --global user.email 14718061295@163.com

  

2.4.生成本地ssh公钥

git bash运行以下命令,生成本地ssh公钥,双引号内为邮箱:

ssh-keygen -t rsa -C "14718061295@163.com"

git bash运行以下命令,查看ssh公钥:

cat ~/.ssh/id_rsa.pub

2.5.将本地ssh公钥添加到码云

将2.4生成的ssh公钥添加到线上仓库

3.将项目下载到本地

在本地创建一个vueProject文件夹,git bash进入到此文件夹,运行以下命令,将项目下载到本地

git clone 项目地址

项目地址 从你的仓库中克隆,相应更改,如图:

4. 配置vue+webpack项目

4.1.安装vue脚手架工具

npm install -g @vue/cli

4.2.创建vue项目

进入到vue项目文件夹,创建vue项目(同时安装webpack依赖)

cd vueProject
vue init webpack qunaer-app

在安装选项中选择 2 (merge)

安装完成后,运行:

cd qunaer-app/
npm run dev

在浏览器中访问:http://localhost:8080,出现如下界面,说明项目创建成功:

4.3.将项目上传到码云

gid add .
git commit -m 'project init initialized'
git push

-------------持续更新中-------------

Vue+Webpack构建去哪儿APP_一.开发前准备的更多相关文章

  1. Vue+Webpack构建移动端京东金融(一、开发前准备)

    一.开发前准备 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+webpack配置实现多页面应用开发

    为什么要配置多页面开发? · 由于单页面应用不利于SEO,对于某些资讯类网站不够友好,而多页面则能够更优的解决此问题. · 传统的多页面开发模式(如java的jsp等) 前后端耦合性大,开发效率低,代 ...

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

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

  6. webpack搭建多页面系统(一):对webpack 构建工具的理解

    为什么使用webpack构建工具? 1.开发效率方面: 在一般的开发过程中,分发好任务后,每个人完成自己单独的页面,如果有的人开发完成之后,接手别人的任务,就有可能造成开发时候的冲突. 如果利用模块化 ...

  7. webpack构建vue项目(配置篇)

    最近公司要求用vue重构项目,还涉及到模块化开发,于是乎,我专门花了几天的时间研究了一下webpack这个目前来看比较热门的模块加载兼打包工具,发现上手并不是很容易,现将总结的一些有关配置的心得分享出 ...

  8. 深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三)

    深入浅出的webpack构建工具--webpack4+vue搭建环境 (十三) 从上面一系列的webpack配置的学习,我们现在来使用webpack来搭建vue的开发环境.首先我们来设想下我们的项目的 ...

  9. 使用webpack+vue.js构建前端工程化

    参考文章:https://blog.csdn.net/qq_40208605/article/details/80661572 使用webpack+vue.js构建前端工程化本篇主要介绍三块知识点: ...

随机推荐

  1. 字节码操作JAVAssist

    字节码操作Javassist 字节码:字节码是设计被用来将代码高效的传送给多种软件平台.硬件平台,字节码的设计也实现了Java的平台无关性,字节码比机器码更抽象,它通常被认为是包含了一个可执行文件的二 ...

  2. 如何在vs2015中编译并配置tesseract4.0

    1)安装相关软件: 下载ccpan,把路径放到path(右击电脑,选择“属性”,选择左边的“高级系统设置”,选择“环境变量”,找到“系统变量”里面的“path”,点击“编辑”,选择右边的“新建”,输入 ...

  3. sqlserver 存储过程 自定义函数 游标???

    create proc cur_fun( @cur cursor --输入参数 ) as begin declare @mytpye tb1_type ) fetch next from @cur i ...

  4. 微信小程序商城开源项目,Weixin-App-Shop 1.0 版本正式发布!!!

    微信小程序商城开源项目,Weixin-App-Shop 1.0 版本正式发布 Weixin-App-Shop 是捷微团队开发的微信小程序商城开源项目,涵盖了微信商城的全部功能,能够快速发布简单易用的小 ...

  5. StreamReader和StreamWriter说明

    StreamReader/StreamWriter操作的是字符数据(char),而FileStream操作的是字节数据(byte) FileStream与StreamXXXX类的默认编码都是UTF8, ...

  6. Kickstart自动化安装平台

    PXE(preboot execute environment,预启动执行环境)是由Intel公司开发的最新技术,工作于Client/Server的网络模式,支持工作站通过网络从远端服务器下载映像,并 ...

  7. Excel下拉选项二级联动

    在日常工作中,难免遇到操作excel的时候,二级联动下拉选项多用于像地市区县的应用场景 1)先把要联动的内容准备好,把它放到第二个sheet页中 2)操作级联的文本 全部选中之后,Ctrl+G -- ...

  8. ASP.NET Easyui datagrid增删改+sqlhelper

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAjAAAAFxCAYAAABtHZI7AAAgAElEQVR4nOy9DXwU1b3//wmCYHjUPl

  9. 《Go程序设计语言》读书笔记-函数

    函数包含连续执行的语句,可以使用代码中通过调用函数来执行他们,函数能够将一个复杂的工作切分成多个更小的模块,使多人写作变得容易.另外,函数对他的使用者隐藏了实现细节.这几方面的特性使得函数成为多数编程 ...

  10. Mutex对象

    案例一 举一个例子,设计模式中的单例模式,记得当时做机房收费系统的时候就用的单例模式防止一个界面被实例多次,而Mutex对象能达到同样的效果,防止界面被实例化多次,起到控制线程的作用. 案例二 如果大 ...