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

最新推荐文章于 2024-01-15 19:32:42 发布

weixin_34247155

最新推荐文章于 2024-01-15 19:32:42 发布

阅读量2.7k

点赞数 2

文章标签： javascript 前端 ViewUI

原文链接：http://blog.51cto.com/14337100/2407815

版权

本文详细介绍了使用Vue CLI创建和启动项目，包括Vue 2.0的目录架构、Webpack配置、项目实战中的技术架构、路由、数据处理等。通过该项目实战，将实现一个移动端团购网站，涉及vue, vuex, vue router, axios等技术。" 131087938,7400912,解决DC综合错误UPF-581：未连接的电源引脚,"['DC综合', '集成电路设计', 'VDD电源', 'Verilog', 'PG netlist']

摘要由CSDN通过智能技术生成

目录
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