2018 April 25 —— improvement; web; js

Vue Mooc(3)

Vue-cli

辅助构建 Vue.js 代码的脚手架工具 : 目录结构, 本地调试, 代码部署, 热加载, 单元测试等

 

npm init  

npm install 

// install 脚手架
npm install -g vue-cli

// 脚手架可能会出现安装失败--> 找到对应的 vue-cli 安装目录,删除已有目录重新安装可解决

// 项目初始化 --> 选择对应的模版       
vue init <template-name> <project-name>     

npm run dev

       
分析 Demo 挖掘信息了解项目是如何运行?
  1. Index 主页中如何嵌入 Vue 组件:
 

<div id="app">
    <App></App>
</div>

// Vue 的组件在 src 目录:   
new Vue({
  el: '#app', // Vue 组件挂载点
  components: { App }, // Vue 组件局部注册->对应的只在父组件模版中可用该标签
  template: '<App/>' // 模版
})

// 附注: 标签对于注册时的大小写不敏感  hello -> Hello 但 HelloWorld 不等于 helloworld

// App 组件的实现在 App.Vue 文件中,通过 App.Vue 文件分析组件的构成:

// 组件 = 模版 template + script + css 

// scoped 属性指定 style时css 仅作用于当前组件,而没有该属性表示 css 为全局样式
<style scoped> 
ES6 中的 export / export default 与 import知识巩固

export => import {moduleName (as aliasName)} from …

export default => export {className as default} 导出默认模块

import aliasName from => import {default as aliasName } from 导入默认模块

深入浅出ES6(十六):模块 Modules

项目文件介绍

babel 转换: 为支持大多数浏览器将 ES6 转换为 ES5 -> babel 插件管理

项目配置文件介绍

eslintrc.js / package.json 文件详细介绍

package.json 中 script tag 中定制命令; => npm run <script>

webpack 打包流程

是个啥?

静态模块打包器,对某个应用进行依赖图分析,该依赖图包含应用程序锁需要的每个模块,进而将模块打包成一个或者多个 bundle;

Webpack 对文件利用 loader做处理,扫描当前工程目录,根据文件后缀名匹配不同的文件,将文件内容作为输入,loader 对于文件内容进行处理,最终输出新的文件内容;

webpack 配置分析:

entry : 入口文件路径配置 key : value ; [name]

chunk :

output : {path fileName}

loader : query {limit , name }

loader 配置

webpack 从入门到工程实践

细说 webpack 之流程篇

项目需求分析

先从页面整体结构看 : 头部 + 页面内容区   进而在页面内部进一步细化划分,层层分析;

学习如何结构化划分页面: 拆分组件;

移动端屏幕适配相关

设备像素比 dip 相关的一些概念;

SVG 矢量图片: SVG 图片可伸缩,通常将一些色彩单一的图片通过 SVG 图片上使用;

资源优化

Webpack 打包 resource 图片为 js,省略图片请求;

SVG 资源使用

iconFont 使用 => iconmoon.io

项目的目录结构

组件的原则: 就近维护

components 目录: 每一个组件都构建独立的目录: 组件可能不光是一个 VUE 文件,还可能包含其他文件;

common 目录: 公用目录

stylus 文件与 css 文件格式的差异;

前后端分离: 前后端独立开发-> 联调组合;

上一篇
下一篇
Loading Disqus comments...
Table of Contents