Vue CLI [API]
安装脚手架
- 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 安装脚手架 - 新版脚手架
cnpm i @vue/cli -g
vue create myapp (方式1 - 命令行，选择模块创建项目)
vue ui （方式2，命令行，启动可视化界面创建项目）
- 安装脚手架 - 兼容低版本脚手架
cnpm i @vue/cli-init -g
vue init webpack myapp
- 命令行创建项目
说明：如果创建项目不成功，可以拷贝别人创建好的项目，安装依赖即可使用，不要一直创建项目（很费时间）
vue项目目录结构
- node_modules // 项目需要使用的依赖文件
- public // 页面图标等
- src // 我们的主场
- tests // 测试文件
.browserslistrc // 浏览器版本的配置，使用最新的版本
.editorconfig // 编辑器的设置
.eslintrc.js // 代码格式校验的配置
.gitignore // git上传忽略的配置
babel.config.js // babel的配置
cypress.json // 测试的插件配置
jest.config.js // 测试模块的配置
package.json// 项目的描述文件
README.md
src目录结构
- assets // 静态资源文件
- components // 组件
- router // 路由
- store // 状态管理器
- views // 页面
App.vue // 主组件
main.js // 入口文件
registerServiceWorker.js // 生产环境下的一些操作
单文件组件
-
在很多 Vue 项目中，我们使用 Vue.component 来定义全局组件，紧接着用 new Vue({ el: '#container '}) 在每个页面内指定一个容器元素。
-
这种方式在很多中小规模的项目中运作的很好，在这些项目里 JavaScript 只被用来加强特定的视图。但当在更复杂的项目中，或者你的前端完全由 JavaScript 驱动的时候，下面这些缺点将变得非常明显：
-
全局定义 (Global definitions) 强制要求每个 component 中的命名不得重复
-
字符串模板 (String templates) 缺乏语法高亮，在 HTML 有多行的时候，需要用到丑陋的 \
-
不支持 CSS (No CSS support) 意味着当 HTML 和 JavaScript 组件化时，CSS 明显被遗漏
-
没有构建步骤 (No build step) 限制只能使用 HTML 和 ES5
-
JavaScript，而不能使用预处理器，如 Pug (formerly Jade) 和 Babel
文件扩展名为 .vue 的 single-file components(单文件组件) 为以上所有问题提供了解决方法，并且还可以使用 webpack 或 Browserify 等构建工具。
结构 + 表现 + 行为
结构是必须的，表现和行为视情况而定
<template>
<div></div>
</template>
<script lang="">
export default {}
</script>
<style lang=""></style>
script可以添加lang属性，选择 行为的语言 javascript / typescript
style可以添加lang属性，选择 表现的形式 less / scss / stylus
如果需要只针对当前组件添加样式 给style添加一个 scoped 属性
运行项目
cnpm run serve
代码验证基本规则
- 每一行js相关的代码都不需要加 分号
- 缩进为两个空格
- 每一个文件最后一行为空行，如果不留这一行
- 每两行代码之间的空行不能超过一行
- 注释语句 // 后面必须得留一个空格，然后写注释
- 每一句代码结束后面不能留空格
- 对象 key: value，注意value前加空格
- 箭头函数 =>左右加空格
- 条件判断语句 if (flag) {}, if后加空格，括号内不加空格，括号后加空格
分析入口文件 main.js
render
-
类型：(createElement: () => VNode) => VNode
-
详细：
字符串模板的代替方案，允许你发挥 JavaScript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。
如果组件是一个函数组件，渲染函数还会接收一个额外的 context 参数，为没有实例的函数组件提供上下文信息。 -
- VNode是JavaScript对象。VNode表示Virtual DOM，用JavaScript对象来描述真实的DOM把DOM标签，属性，内容都变成对象的属性。就像使用JavaScript对象对一种动物进行说明一样{name: ‘Hello Kitty’, age: 1, children: null}。
- 通过render将template模版描述成VNode，然后进行一系列操作之后形成真实的DOM进行挂载。
Vue Router
import Vue from 'vue'
// const Vue = require('vue')
import App from './App.vue'
// const App = require('./App.vue')
import './registerServiceWorker'
// require('./registerServiceWorker')
import router from './router'
// const router = require('./router')
import store from './store'
// const store = require('./store')
// Vue的项目配置 环境标识 -- 生产环境 - false
// 项目上线时将此值改为true
Vue.config.productionTip = false
// new Vue实例
// ？ 怎么没有el选项 new Vue().$mount('#app')
// 如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 vm.$mount() 手动开启编译。
// ？ 怎么没有components注册组件 render: h => h(App)
// 用App.vue的模板替换了index.html 中的 <div id="app"></div>
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
修改主页面结构 App.vue
<template>
<div class="container">
<div class="box">
<header class="header">header</header>
<div class="content">content</div>
</div>
<footer class="footer">footer</footer>
</div>
</template>
<style lang="scss">
</style>
-
设计基本的样式 可以自己写scss 函数实现，也可以使用第三方额 scss 库
-
拷贝 lib 文件至项目的src目录 - 去哪网项目中扒出来的
scss库的使用
引入文件时，文件路径中的@代表的就是src的目录
-
哪里使用哪里就引入 lib/reset.scss;
-
矩形的表示方法
-
弹性盒布局写法
-
垂直方向的弹性盒
-
弹性盒权重设计
-
内容过多超出 要可以滚动
-
添加背景颜色
-
设置字体颜色
-
清除浮动
了解更多，请查看 lib/classes.scss
<style lang="scss">
@import '@/lib/reset.scss';
.container {
@include rect(100%, 100%);
@include flexbox();
@include flex-direction(column);
.box {
@include flex();
@include rect(100%, auto);
@include overflow(auto); // 部分浏览器需要加
@include flexbox();
@include flex-direction(column);
.header {
@include rect(100%, 0.44rem);
@include background-color(#f66);
@include color(#fff);
@include font-size(18px);
}
.content {
@include flex();
@include rect(100%, auto);
@include overflow(auto);
}
}
.footer {
@include rect(100%, 0.5rem);
@include background-color(#efefef);
}
}
</style>
创建项目的基本的页面
首页、分类、购物车、我的、详情、登陆、注册、搜索、订单、支付…
-
配置页面底部
-
编辑底部的样式
-
添加字体图标 阿里的图标库
选择图标-》加入购物车-》添加至项目-》选择font-class->生成在线的css连接，复制到public/index.html处的head内部
-
给底部添加图标
-
调整图标的大小以及字体的大小
vue的路由
-
路由懒加载
-
当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。
-
结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。
-
首先，可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身)：
const Foo = () => Promise.resolve({ /* 组件定义对象 */ }) -
第二，在 Webpack 2 中，我们可以使用动态 import语法来定义代码分块点 (split point)：
import('./Foo.vue') // 返回 Promise -
结合这两者，这就是如何定义一个能够被 Webpack 自动代码分割的异步组件
1.配置路由文件
src/router/index.js
配置路由规则
const routes = [
{
path: '/', // 地址栏输入的那个网址
name: 'index', // 起的名字 -- 命名路由
// 当前地址栏输入这个网址时，你需要显示的是哪一个页面
// 路由的懒加载
component: () => import('@/views/home/index.vue')
},
{
path: '/home', // 地址栏输入的那个网址
name: 'home', // 起的名字 -- 命名路由
// 当前地址栏输入这个网址时，你需要显示的是哪一个页面
// 路由的懒加载
component: () => import('@/views/home/index.vue')
},
{
path: '/kind',
name: 'kind',
component: () => import('@/views/kind/index.vue')
},
{
path: '/cart',
name: 'cart',
component: () => import('@/views/cart/index.vue')
},
{
path: '/user',
name: 'user',
component: () => import('@/views/user/index.vue')
},
{
path: '/login',
name: 'login',
component: () => import('@/views/login/index.vue')
},
{
path: '/register',
name: 'register',
component: () => import('@/views/register/index.vue')
}
]
路由对应组件的显示
