Vue去哪儿网项目准备

一、运行环境

1). 安装node：node.js官网 安装完要进行环境配置
2). npm包管理器(可以使用淘宝镜像cnpm)
3). 安装vue-cli2：npm install -g vue-cli
4). 安装vue-cli3：npm install -g @vue/cli
5). 检查是否安装成功：node -v、npm -v、vue -V

二、创建vue-cli2去哪儿网项目

1).创建一个基于webpack模板的项目

vue init webpack projectName

2).进入项目信息配置

>> Project name projectName——项目名，小写
>> Project description A Vue.js project——项目描述
>> Author dev Author——项目作者
>> Vue build (Use arrow keys)
>> Vue build standalone
>> Install vue-router? ——vue官方路由
>> Use ESLint to lint your code? ——代码语法检查
>> Pick an ESLint preset Standard
>> Set up unit tests ——单元测试
>> Setup e2e tests with Nightwatch? 端对端测试
>> Should we run `npm install` for you after the project has been created? (recommended) ——npm包管理器

3).进入项目目录下 cd projectName
4).启动服务npm run dev 出现localhost:8080成功

三、认识项目结构并引入必要文件

1）项目结构（在编辑器中打开）

- README.md——项目说明文件

- package.json——依赖包

- package-lock.json——package的一个锁文件，安装第三方依赖的具体版本，保持团队编程的统一

- LICENSE——开源协议的说明

- index.html——项目默认的首页模板文件

- .postcssrs.js——对postcssrs的配置项

- .gitignore——把一些文件不放在git仓库中

- eslintrc.js——代码检测规范

- eslintgnore——不受代码检测规范

- editorconfig——配置编辑器语法

- .babelrc——vue单文件组件代码写法，babelrc语法解析器做一些语法上的转换

- static——静态资源

  静态图片，后续模拟的json数据，放在mock文件夹下

- **src——项目的源代码（核心）**

  main.js——整个项目的入口文件

  App.vue——项目最原始的根组件

  **router——路由**——index.js（项目所有的路由放在index.js下）

  components——项目的组件

  assets——项目图片资源

- node_modules——（不用管）依赖包

- config——项目的配置文件

  index.js——项目的基础配置

  dev.env.js——开发环境的一些配置信息

  pro.env.js——线上环境的一些配置信息

- bulid——项目打包webpack的配置内容

2）引入必要文件

• reset.css：统一不同浏览器的默认样式，文件为src/assets/styles/reset.css，并在main.js中引用
  【本项目使用的尺寸单位是rem，是相对于html的font-size50px的大小来设置的】
  1rem = html font-size = 50px
• 1像素边框：显示一个类似垂直分割线的边框效果
• 300毫秒点击延迟（部分浏览器上）

npm install fastclick --save

在main.js中引入并初始化

import fastclick from 'fastclick'
// 300毫秒点击延迟
fastclick.attach(document.body)

• 使用阿里 iconfont 字体图标
  阿里iconfont首页
  点击菜单——>图标管理——>加入到我的项目——>引入有三种方式

• 安装css插件 syulus 依赖npm install stylus --save

• 安装css插件 stylus-loader 依赖npm install stylus-loader --save

四、项目开发过程注意点

• scoped 关键字的作用： 本组件的样式对其他组件没有影响（限制，只对当前组件样式有效）
• 引入css文件@import '~@/...'加波浪线和@符号（代表src目录）
• 自己修改，bulid——webpack.base.conf.js找到alias修改, 修改完记得一定要重启项目 npm run start

'@': resolve('src'),
'styles': resolve('src/assets/styles') 

• git 的使用，把代码同步到线上码云 gitee

// 码云上创建分支拉到git
git pull
git checkout [分支名称]
// 提交分支
git add . 
git commit -m '描述'
git push
// git 合并到主干 ：
git checkout master 
git merge [分支名称]
git push

四、项目地址

码云：https://gitee.com/Aube0313/travel
百度云：https://pan.baidu.com/s/127aNgso9lF15dePiewbG0g 提取码：vmem