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               路由文件