{{ title }}
{{ errorMessage }}


{{ errorMessage }}





{{ registerSuccessMessage }}

Vue CLI 3.0搭建与配置开发环境,并使用git管理项目

相信大家刚开始学习Vue的时候,一般都是直接以CDN或本地的方式将vue.js引入html界面,但是我们在真正的开发环境中,需要使用webpack构建项目,去帮助我们编译和打包项目。Vue官方提供的Vue CLI命令行工具,正是构建于 webpack 和 webpack-dev-server 之上的,所以可以使用它快速搭建大型单页应用。

注*:本文章涉及的内容全部基于Windows 10系统,mac或Linux的操作可能有所不同,但是使用的命令是一样的.

一、安装node.js

官网:https://nodejs.org/en/ 中文网:http://nodejs.cn/1.jpg

安装完成后需要检测是否安装成功,Win+R 在运行面板中输入 cmd 打开命令行工具,输入以下命令:

node -v
npm -v

因为在项目中需要用到npm这个包管理器,所以也需要检测一下npm是否已安装好,输入命令后如果返回一个版本号,说明安装成功:
1557819074(1).jpg

二、安装 Git 版本控制系统

Git官网:https://git-scm.com/

Git是一个免费的开源 分布式版本控制系统,旨在快速高效地处理从小型到大型项目的所有事务。
2.jpg

同样,输入以下命令检测git是否安装成功,返回一个版本说明安装成功:

git --version

// => git version 2.17.1. windows. 2  说明笔者的git安装成功

二、使用码云进行代码托管

在真实的项目开发中,我们要使用git进行代码的版本控制,同时要用到远程仓库,让团队的其他成员来协同开发。这里笔者没有自己搭建远程仓库,而是使用码云作为远程仓库托管代码,大家也可以使用比较流行的Github,但是GitHub的私有库是收费的。

码云:https://gitee.com          GitHub:https://github.com/

1、用码云创建一个私有仓库存放我们的代码:
image.png

2、生成SSH公钥

打开Git Bash Here命令行工具,输入以下命令生成ssh公钥:

ssh-keygen -t rsa -C "xxxxx@xxxxx.com"

双引号里面的内容是你的邮箱,ssh公钥生成后,输入以下命令查看你的ssh公钥,并复制到你的码云SSH公钥中:

cat ~/.ssh/id_rsa.pub

这里有码云的详细图文教程:https://gitee.com/help/articles/4181#article-header0

3、克隆远程仓库到本地

3.jpg

用cd命令切换到你要存储项目的路径(笔者存放于G盘根目录),并粘贴刚才复制的SSH地址:

cd /g

git clone git@gitee.com:webjike/Demo.git

命令执行完之后,git在我的G盘自动创建了一个和远程仓库内容相同的文件夹:
image.png
image.png

三、安装Vue CLI脚手架工具

在Git Bash Here中输入下列命令安装这个新的包:

npm install -g @vue/cli

你还可以用这个命令来检查其版本是否正确(返回版本号说明安装成功):

vue --version

四、创建一个项目

运行以下命令来创建一个新项目:

vue create hello-world

因为笔者的电脑是windos系统,所以上面的命令启动时,交互提示符并不工作,所以需要使用以下命令:

winpty vue.cmd create hello-world

hello-world是这个新项目的文件夹名称,笔者在上面已经将远程仓库克隆到了G盘的Demo目录,所以希望能在Demo目录里面创建我的项目:

cd /g
winpty vue.cmd demo

然后提示显示demo已存在,选项:覆盖、合并、取消,显然我们需要合并:image.png

随后询问是否取一个 preset(预设),默认 preset 包含了基本的 Babel + ESLint,即编译方式和语法规范。你也可以选择“手动选择特性”来选取需要的特性,这个默认的设置非常适合快速创建一个新项目的原型,而手动设置则提供了更多的选项,它们是面向生产的项目更加需要的。image.png

1、项目安装配置
这里建议新手创建项目时,选用默认选项即可,由于笔者项目需求的原因需要使用一些功能,所以选择“手动选择特性”:image.png

按上下键切换目标选项,空格键勾选和取消,按 a 全选,按 i 反选,选好后回车确定

Babel:js编译器,它可以让我们的项目支持新语法,例如ES6
TypeScript:安装TypeScript依赖,它是 JavaScript 的强类型版本
Progressive Web App (PWA) Support:PWA,模拟原生app,渐进式网络应用程序
Router:路由插件
Vuex:状态管理模式插件
CSS Pre-processors:css预处理语言
Linter / Formatter:代码规范
Unit Testing:组件单元测试
E2E Testing:端对端测试,模拟用户真实场景

2、选择css预处理语言
Vue推荐我们使用Stylus,所以笔者用的也是Stylus:
image.png

3、选择代码规范
选正常模式即可:
image.png

ESLint with error prevention only:只进行报错提醒;
ESLint + Airbnb config:不严谨模式;
ESLint + Standard config:正常模式;
ESLint + Prettier:严格模式;

4、选择语法检查方式(这里我选择保存就检测)

Lint on save // 保存就检测
Lint and fix on commit // fix和commit时候检查

5、配置文件存放位置
第一个是放独立文件夹里,第二个放package.json里,这里随便选,我选择放在独立文件夹:image.png

6、是否保存当前配置信息
保存之后,下次创建项目时就会有本次的配置供你使用,这里我保存为allen-vue-default:image.png

确定后就开始创建项目,下载依赖模块:
image.png
image.png

看到上图信息,说明我们的项目已经创建好了,并给我们提供了几个命令:

cd demo    // 进入项目根目录

npm run serve    // 启动项目

在浏览器中输入:http://localhost:8080/  即可访问网站了

五、同步本地仓库到线上

项目创建完成后,我们的Demo目录多了很多文件:
image.png

这时我们需要将它提交到远程仓库,保持与本地仓库的内容一致:

git status
git add .
git commit -m 'project initialized'

键入以上命令,查看新增了哪个文件,然后将所有的文件添加到缓存区,随后同步到远程仓库:

git push

参考文档:https://cli.vuejs.org/zh/guide/

文章分类
热门文章
文章标签