简介
本篇主要进行如下工作:
- 使用vue-cli初始化项目
- 将项目关联到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仓库关联上。
网友评论