在线商城项目01-项目初始化简介

简介

本篇主要进行如下工作：

1. 使用vue-cli初始化项目
2. 将项目关联到github

ps：在此之前请大家配置node环境，并使用npm安装vue-cli。

1. 使用vue-cli初始化项目

step1: 打开终端，进入一个你想创建该项目的目录。输入如下命令：

vue init webpack six-tao

会有如下图所示命令提示，一路默认即可。这里值得一说的的是eslint，我选择了standard，这点并不是强制的。你可以选择不使用eslint，也可以使用Standard或者Airbnb或者none来自定义。如果你在选定standard以后确实不习惯，其实也是可以修改规则的，虽然standard明确不推荐进行修改。后面我会讲到如何去修改。

step2: 现在进入项目目录，并运行代码。

由于之前我们在构建项目时选择了自动npm install。所以此处我们不需要再运行该命令。直接运行终端上提示的两行命令即可：

cd six-tao
npm run dev 或者 npm run start 或者 npm start

然后按照提示打开浏览器输入如下url即可：

http://localhost:8080

step3: 修改端口号。

这一步并不是必须的，你完全可以省略。主要是很多项目端口号都是8080，虽然运行项目以后，如果指定端口被占用，会自动分配一个空闲的端口号。但url总是变还是很烦的，所以我们手动指定一个其他的端口号就行了。当然端口号需要在1024~65535之间，包括1024和65535。如果你指定了小于1024的端口，会随机分配一个空闲端口给你，如果指定端口号大于65535则会直接报错。这里我设定的端口号是8086。只需要修改config/index.js的port即可，如图：

现在重新运行项目，并打开如下地址：

http://localhost:8086

2. 将项目关联到github

step1: 在github新建一个仓库，最好是和项目同名。github的具体操作可以看我的这篇文章git基础之github使用入门。成功以后会有如下提示：

step2: 创建本地仓库并和github仓库关联

首先初始化本地仓库，进入本地项目根目录，输入如下命令：

git init

然后，我们并不需要添加readme.md，因为使用vue-cli时我们已经添加了readme，并且我们还添加了很多其他的目录和文件。在命令行运行：

git status

可以查看添加的文件。然后运行如下命令：

git add .
git commit -am 'project init'
git remote add origin https://github.com/lovedd/six-tao.git
git push -u origin master

如图，成功将本地仓库和github仓库关联上。