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')
}
]