web前端项目实战_vue项目仿美团【爱创课堂】

目录
Vue 2.0

一、Vue Cli
1.1安装
1.2创建项目
1.3启动项目
1.4目录架构
1.5 webpack配置
二、项目实战
2.1技术架构
2.2目录部署
2.3路由
2.4 webpack拓展
2.5 vue cli拓展
2.6数据
2.7开发模块顺序
三、Vue
3.1路由守卫

一、Vue Cli
在vue项目中，我们要编译vue文件，要编译ES6文件，要编译css预编译语言等等，在项目开发之前，我们要做很多准备。vue为了简化开发前的准备，提供了vue-cli脚手架。

1.1安装
vue-cli，提供了vue指令，因此要全局安装
npm install -g @vue/cli
安装完成，提供了vue指令，通过vue -V查看版本号

1.2创建项目
通过create参数创建项目
vue create 项目名称
vue cli创建的项目也是基于yarn管理
npm install yarn
yarn也是一个包管理器，为了替代npm
在项目中，安装模块，通过yarn来安装
npm安装: npm install 模块
yarn安装：yarn add 模块

1.3启动项目
通过yarn serve即可启动项目。

1.4目录架构
node_modules 		依赖的模块
public 				静态资源模块
index.html 			入口html文件
favicon.ico	 		icon文件
src 					开发的目录
assets 				所有静态资源（会被webpack处理的）
components 			所有组件
views 				路由页面
App.vue 				应用程序组件（vue cli中组件文件首字母都大写了。）
main.js 				项目入口文件
router.js 				路由文件
store.js 				store文件
.broserslistrc 		浏览器配置
.eslintrc.js 		js校验配置
.gitigonore 		git提交时候忽