《vue.js从入门到项目实战》的项目实战笔记

vue项目之启动项目

前言：

vue的基本知识 重点讲述《vue.js从入门到项目实战》的第一章到第四章

vue项目化 重点讲述《vue.js从入门到项目实战》的第六章

接下来就是对第八章的启动了。

文章目录

• vue项目之启动项目
• • 前言：
  • 一、理论内容
  • • 页面设计
    • 目录结构设计
    • • 初始目录
      • src目录结构
    • webpack介绍
    • Font Awesome介绍
    • 动态资源配置
    • 动态资源构建
    • 动态资源存储
    • 自定义组件
  • 二、启动线上商城
  • 三、启动企业网站
  • • 理论
    • • 响应式设计：
      • 页面开发-页面切换与滑动：
      • 划分内容区
      • 中英文语种切换
    • 启动
  • 四、启动掌上新闻
  • • 理论
    • 项目构建
    • 启动
  • 五、启动SVG画图板
  • • 理论
    • • 基本图形的使用
      • SVG中的渐变
    • 页面设计
    • 启动
  • 六、总结

一、理论内容

打造一个线上商城。首页、详情页、购物车、订单四个页面。购物车和订单页面的动态就没展示了。

页面设计

首页设计：顶部banner有搜索框、购物车和订单的跳转链接等，是各个页面所共有的；中部banner有导航；底部有几件商品的超链接；

详情页设计：左侧banner是商品的详情图、右侧banner是商品的购物；

购物车设计：表格设置商品；

订单设计：和购物车设计类似，表格设置订单；

目录结构设计

初始目录

build：开发和生产版本的构建脚本；

config：开发和生产版本的部分构建配置；

dist：由npm run build生成；项目的生产版本，只有HTML、CSS、JavaScript和静态资源；

src：项目开发的关键资源目录和主要工作空间；

.gitignore：应该被git版本控制工具忽略的文件；

index.html：应该被webpack注入资源的模板HTML文件；

src目录结构

asset：存放样式表和图片；

components：存放vue的单文件模板。目录下的index.vue、Goods.vue、Cart.vue、Order.vue分别对应首页、购物页、购物车、订单；

config：存放配置项，如商品信息及商品细分类目的导航；

router：路由；

widgets：存放自定义组件，自定义了复选框和跑马灯；

App.vue：项目的根目录

main.js：webpack的入口文件，在这里引入全局资源，如CSS、js等和声明全局变量。

webpack介绍

webpack是一个模块打包器，可以将项目中所有资源打包整合注入到指定位置。在这个项目中是通过main.js引入，然后打包到dist文件夹中。在vue CIL构建的项目中，build目录下存放着webpack的配置文件。

Font Awesome介绍

一套不错的图标库，提供几百个图标并且用法简单，满足日常开发需求。

方法一：CDN

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css" target="_blank" rel="external nofollow" >
           

方法二：cnpm

cnpm install font-awesome --save-dev
           

之后再main.js中全局引入依赖。

动态资源配置

在src/config/config.js中模拟商品信息；

在src/components/index.vue组件中引入并渲染出来；

把这些信息在config.js中配置的好处是这些信息不仅能在index.vue中使用，也可以在Goods.vue中使用。并且修改的时候只需修改一处。

动态资源构建

用npm run build来构建项目的生产版本。之后再项目根目录中会出现一个dist文件目录。

vue CLI无法检索路径的字符串，这时可以把静态资源放在src同级的static目录下。当vue CLI构建生产版本时，该目录下的东西就会被注入dist/static中。

动态资源存储

使用window.localStorage来存储数据。

window.localStorag来接收对象类型的数据值，所以在读取和写入时，我们需要用到浏览器内置对象JSON。

自定义组件

封装两个组件：首页幻灯片、购物车页面的复选框；

二、启动线上商城

一个人从头敲代码到项目建成，会学得很全面。不过我暂时只做初步了解，能理解原理以及会修改即可。

首先用cmd进入项目的文件夹；然后安装项目依赖cnpm install；接着启动项目npm start；最后在浏览器中打开http://localhost:8080

果然成功了。

三、启动企业网站

发现启动这么方便，于是干脆把剩下几个也一一尝试。

理论

响应式设计：

Ethan marcotte在2010年5月提出的概念，指的是网页在不同尺寸和设备上可响应式地显示，达到once write，run everywhere的效果。最初的响应式设计用于CSS3中，通过媒体查询media query判断设备类型，进而对不同设备设置相应的样式表。在实际开发过程中，也会使用js对设备类型进行补充判断。

页面开发-页面切换与滑动：

企业官网大都采用一种布局方式——“顶部导航栏+内容栏”。用户可以通过顶部导航栏轻松切换页面；

许多网站也习惯把多个内容区从上到下组合成一个长页面，通过滑动滚动条来切换浏览器视窗的位置。还有就是用swiper的组件将页面设置为单屏，并以幻灯片翻页的方式来切换视图。本项目就是采用这种。

swiper的代码可以在GitHub上下载好，然后通过静态脚本方式引用和使用它们。

<link rel="stylesheet" href="path/to/swiper.min.css" target="_blank" rel="external nofollow" 
           

也可以利用npm来安装swiper。然后在相关组件引入和使用它。

cnpm install swiper --save-dev
           

划分内容区

顶层header有logo和中英文切换，是固定不变的。共有四个内容区（首页、三个展示内容页）

首页一般设计一个具有冲击力的特效。展示内容页看页面需要什么。

中英文语种切换

把幻灯片内的信息提取出来，vue的插值绑定可以设置占位符，选择不同语言，网站就要不同的语言展示。首先是把所有信息都纳入配置，然后将配置导入组件并绑定到视图模板上。

启动

指令如下：

C:\Users\Administrator>cd c:/

c:\>cd C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin\RentCar

C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin\RentCar>cnpm install

C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\bin\RentCar>npm start
           

然后成功启动。

四、启动掌上新闻

资讯类应用

理论

应用首屏：新增GIF图作为启动动画，使首屏有一个炫酷的动画。

应用首页：搜索栏、tab选项卡和新闻列表三部分。新闻类别用v-for指令获取数据生成；

新闻详情：新闻的DOM结构都是定制的，但只需要v-html指令将新闻的DOM结构数据表现出来就可以了。

搜索页面：历史记录、猜你想搜的。用window.localStorage来保存用户曾输入过的关键字。

搜索结果：和首页类似，但未加入Tab选项卡。

项目构建

这个项目模拟了完整的前后台交互流程，新增了data、store、ajax目录。

data目录充当数据库的角色，里面存储着应用所有动态数据。category.json保存着新闻的分类数据；List.json保存着新闻的简介数据；News.json保存着新闻的DOM数据结构；

ajax目录负责完成与后台接口的对接，并将数据导流到Vuex全局状态管理器。

store目录存储项目的全局状态管理器。

启动

和前面一样，成功启动了。但是Chrome浏览器却显示“请在手机端上访问”

方法一：F12，然后点击左上角，显示手机浏览。

结果：不行。

然后刷新一下，可行。

刚刚我差点就想用手机模拟器试一试了，还好谷歌可以模拟。

vue开发手机端，如何在手机端进行项目的预览和测试

差一点就去试一试了。这个掌上新闻还挺好的。比前两个更有参考价值。

五、启动SVG画图板

工具类网站

理论

SVG是可伸缩矢量图形，一种基于XML的图片格式，尺寸放大或缩小图片质量不损失，并且可以将SVG元素作为DOM元素处理。

基本图形的使用

用

SVG中的渐变

用Linear Gradient和Radial Gradient。

页面设计

顶部放logo；左侧为工具类；右侧为菜单栏；中间是画板；

启动

按之前的操作启动。

成功启动

六、总结

熟悉vue项目的启动后，其他vue项目也终于会引用了。

在第一个项目中：线上商城学习到了webpack和font awesome；

在第二个项目中：企业网站学习到了响应式、swiper.js、双语切换；

在第三个项目中：掌上新闻学习到了前后台交互流程；这一部分很有意思，可以扩展学习后端。第一个项目虽然也有后端，但是没模拟。

在第四个项目中：SVG画板学习到了SVG的概念。

总的来说，通过三部分的学习，最终初步会用vue了。

第一部分vue的基本知识 重点讲述网站的发展和vue实例与模板语法

第二部分vue项目化 重点讲述用vue CIL进行项目化。（前端路由和状态管理的笔记写在书上）

第三部分，用四个项目讲解vue的项目开发。

之后，尝试一下github上其他vue项目，然后使用elementUI进行前端网站开发；可能会用到不少组件。到时候一个一个试。

再之后，尝试一下学习node.js，然后用express做做后端。

剩下就熟能生巧，根据这些工具然后去理解其底层知识，看HTML、CSS、JavaScript、DOM、网络知识，还有响应式、兼容性、安全、SEO、CSR、SSR、异步编程，还有组件化、less、命名规范、性能优化、内存管理、工程化思想。

最后不断实践，不断理解。