Vue CLI
什么是Vue CLI:
- 如果你只是简单写几个Vue的Demo程序, 那么你不需要Vue CLI.
- 如果你在开发大型项目, 那么你需要, 并且必然需要使用Vue CLI
①使用Vue.js开发大型应用时,我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
②如果每个项目都要手动完成这些工作,那无疑效率比较低效,所以通常我们会使用一些脚手架工具来帮助完成这些事情。 - CLI是什么意思?
①CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架.
②Vue CLI是一个官方发布 vue.js 项目脚手架
③使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置.
Vue CLI使用前提:
- 安装NodeJS
①默认情况下自动安装Node和NPM
②NPM的全称是Node Package Manager
③是一个NodeJS包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准。 - Vue.js官方脚手架工具就使用了webpack模板
①对所有的资源会压缩等优化操作
②它在开发过程中提供了一套完整的功能,能够使得我们开发过程中变得高效。
Vue CLI的使用:
- 安装Vue脚手架:npm install -g @vue/cli
①查看vue版本:vue --version
②注意:上面安装的是Vue CLI3的版本,如果需要想按照Vue CLI2的方式初始化项目时不可以的。
③拉取2.X模板(旧版本):npm install -g @vue/cli-init - Vue CLI2初始化项目:vue init webpack my-project
- Vue CLI3初始化项目:vue create my-project
Vue CLI2详解:
- 初始化命令使用:
- 目录简介:
①build.js:构建入口
②index.js:变量,配置信息
③webpack.base.conf.js:公共webpack配置信息
④webpack.dev.conf.js:部署配置信息
⑤webpack.prod.conf.js:构建配置信息
(运行时+编译器)Runtime-Compiler和(只含有运行时版本)Runtime-only的区别:
- 如果你需要在客户端编译模板(例如, 向template 选项传入一个字符串,或者需要将模 板中的非DOM的HTML挂载到一个元素),你需要带有编译器的版本,因而需要完整构建版本。
- 在使用vue-loader或vueify 时,* . vue文件中的模板会在构建时(build time)预编译(pre-compile)为JavaScript.最终生成的bundle中你不再需要编译器(compiler),因此可以直接使用只含有运行时的构建版本(runtime- only)。
//这种情况需要编译器(compiler)
new Vue({
template: '<div>({ hi }}</div>'
)
//这种情况不需要
new Vue({
render (h) {
return h('div', this.h1)
}
})
- 由于只含有运行时构建版本(runtime-only)比完整构建版本(ull-build)轻量大约30%,你应该尽可能使用只含有运行时的构建版本。如果你还是希望使用完整构建版本,则需要在打包器中配置别名。
- 简单总结:
①如果在之后的开发中,你依然使用template,就需要选择Runtime-Compiler。
②如果你之后的开发中,使用的是.vue文件夹开发,那么可以选择Runtime-only。
render和template区别:
//Runtime-Compiler
new Vue({
el :'#app',
components: { App },
template: '<App/>'
})
//Runtime-only
new Vue({
el : '#app',
render: h => h(App)
})
- 为什么存在这样的差异呢?
①我们需要先理解Vue应用程序是如何运行起来的。
②Vue中的模板如何最终渲染成真实DOM。
③我们来看下面的一幅图。
npm run build与npm run dev详解:
- npm run build:
- npm run dev:
webpack.base.conf.js起别名:
./
表示相对路径,具体代表当前目录下的同级目录,遵从的是从后往前找文件@/
的意思表示的是相对路径(当然这也是简写啦),因为这个在根目录/build/webpack.base.conf.js文件中@是配置的,比如我的配置文件中@就代表src目录,遵从的是从前往后找,比如’@/components/login’ 就表示的是src/components/login文件
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'@':resolve('src'),
'pages': resolve('src/pages'),
'common': resolve('src/common'),
'components':resolve('src/components'),
'network': resolve('src/network')
}
},
Vue CLI3详解:
- vue-cli 3 与 2 版本有很大区别:
①vue-cli 3 是基于 webpack 4 打造,vue-cli 2 还是 webapck 3
②vue-cli 3 的设计原则是“0配置”,移除的配置文件根目录下的,build和config等目录
③vue-cli 3 提供了 vue ui 命令,提供了可视化配置,更加人性化
④移除了static文件夹,新增了public文件夹,并且index.html移动到public中 - 初始化使用:
- 目录结构详解:
- 配置去哪里了:
①UI方面的配置:启动配置服务器:vue ui
②一大堆配置文件去哪里了?
- vue config.js简介:
vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。
具体可以查阅参考:Vue CLI配置链接。比较常见的配置项有:
①baseUrl ( publicPath ):部署应用包时的基本 URL。
②outputDir:当运行 vue-cli-service build 时生成的生产环境构建文件的目录。
③assetsDir:放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。
④pages:在 multi-page 模式下构建应用。每个“page”应该有一个对应的 JavaScript 入口文件。
⑤lintOnSave:是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码。这个值会在 @vue/cli-plugin-eslint 被安装之后生效。设置为 true 或 ‘warning’ 时,eslint-loader 会将 lint 错误输出为编译警告。默认情况下,警告仅仅会被输出到命令行,且不会使得编译失败。
⑥devServer:所有 webpack-dev-server 的选项都支持。注意:有些值像 host、port 和 https 可能会被命令行参数覆写。有些值像 publicPath 和 historyApiFallback 不应该被修改,因为它们需要和开发服务器的 publicPath 同步以保障正常的工作。
⑦devServer.proxy:如果你的前端应用和后端 API 服务器没有运行在同一个主机上,你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。devServer.proxy 可以是一个指向开发环境 API 服务器的字符串。
⑧pluginOptions:这是一个不进行任何 schema 验证的对象,因此它可以用来传递任何第三方插件选项。
Vue-router
什么是路由?
- 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动
- 路由器提供了两种机制: 路由和转送.
①路由是决定数据包从来源到目的地的路径.
②转送将输入端的数据转移到合适的输出端. - 路由中有一个非常重要的概念叫路由表。路由表本质上就是一个映射表, 决定了数据包的指向。
后端路由阶段:
- 早期的网站开发整个HTML页面是由服务器来渲染的:
①服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示. - 但是一个网站, 这么多页面服务器如何处理呢?
①一个页面有自己对应的网址, 也就是URL.
②URL会发送到服务器, 服务器会通过正则对该URL进行匹配, 并且最后交给一个Controller进行处理.
③Controller进行各种处理, 最终生成HTML或者数据, 返回给前端.
④这就完成了一个IO操作. - 上面的这种操作, 就是后端路由。
①当我们页面中需要请求不同的路径内容时, 交给服务器来进行处理, 服务器渲染好整个页面, 并且将页面返回给客户顿.
②这种情况下渲染好的页面, 不需要单独加载任何的js和css, 可以直接交给浏览器展示, 这样也有利于SEO的优化. - 后端路由的缺点:
①一种情况是整个页面的模块由后端人员来编写和维护的.
②另一种情况是前端开发人员如果要开发页面, 需要通过PHP和Java等语言来编写页面代码.
③而且通常情况下HTML代码和数据以及对应的逻辑会混在一起, 编写和维护都是非常糟糕的事情.
前端路由阶段:
- 前后端分离阶段:
①随着Ajax的出现, 有了前后端分离的开发模式.
②后端只提供API来返回数据, 前端通过Ajax获取数据, 并且可以通过JavaScript将数据渲染到页面中.
③这样做最大的优点就是前后端责任的清晰, 后端专注于数据上, 前端专注于交互和可视化上.
④并且当移动端(iOS/Android)出现后, 后端不需要进行任何处理, 依然使用之前的一套API即可.
⑤目前很多的网站依然采用这种模式开发. - 单页面富应用阶段:
①其实SPA最主要的特点就是在前后端分离的基础上加了一层前端路由.
②也就是前端来维护一套路由规则. - 前端路由的核心是什么呢?
①改变URL,但是页面不进行整体的刷新。
URL的hash:
- URL的hash也就是锚点(#), 本质上是改变window.location的href属性.
- 我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新
执行:location.hash = '/foo'
返回:"/foo"
执行:location. href
返回:"http: //192.168.1.101: 8000/examples/urlChange/#/foo"
HTML5的history模式:
- history接口是HTML5新增的, 它有五种模式改变URL而不刷新页面。
- history接口底层的数据结构是栈。
- 函数:
①history.pushState():插入锚点,改变url,支持前进后退。
②history.replaceState():插入锚点,改变url,不支持前进后退。
③history.go() - 补充说明:
①上面只演示了三个方法
②因为 history.back() 等价于 history.go(-1)
③history.forward() 则等价于 history.go(1)
④这三个接口等同于浏览器界面的前进后退 与URL的hash相比,没有了#符号
。
vue-router认识:
- 目前前端流行的三大框架, 都有自己的路由实现:
①Angular的ngRouter
②React的ReactRouter
③Vue的vue-router - 当然, 我们的重点是vue-router,vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。
- vue-router是基于路由和组件的:
①路由用于设定访问路径, 将路径和组件映射起来.
②在vue-router的单页面应用中, 页面的路径的改变就是组件的切换.
安装和使用vue-router:
- 安装vue-router:npm install vue-router --save
- 在模块化工程中使用它(因为是一个插件, 所以可以通过Vue.use()来安装路由功能)
①导入路由对象,并且调用 Vue.use(VueRouter)
②创建路由实例,并且传入路由映射配置
③在Vue实例中挂载创建的路由实例 - 使用vue-router的步骤:
①创建路由组件
②配置路由映射: 组件和路径映射关系
③使用路由: 通过<router-link>和<router-view> - 路由标签详解:
①<router-link>: 该标签是一个vue-router中已经内置的组件, 它会被渲染成一个<a>标签.
②<router-view>: 该标签会根据当前的路径, 动态渲染出不同的组件。
③网页的其他内容, 比如顶部的标题/导航,或者底部的一些版权信息等会和<router-view>处于同一个等级。
④在路由切换时, 切换的是<router-view>挂载的组件,其他内容不会发生改变。
----创建router文件夹,然后创建index.js文件,创建router实例,配置组件和路径的映射关系:----
import Vue from 'vue'
import VueRouter from 'vue-router'
// 1.注入插件
Vue.use(VueRouter)
// 2.定义路由
const routes = [
{
path: '/home',
component: Home
}
{
path: '/about',
component: About
}
]
// 3.创建router实例
const router = new VueRouter({
routes
})
// 4.导出router实例
export default router
----main.js文件中挂载到Vue实例中:----
import Vue from 'vue'
import App from './App'
import router from './router'
new Vue({
el: '#app',
router,
render: h => h(App)
})
----创建About和Home路由组件----
----使用路由:----
<template>
<div id="app">
<h1>我是网站的标题< /h1>
<router-link to="/home">首页</router-link>
<router-link to="/about">关于</router-link>
<router-view></router-view>
<h2>我是APP中一些底部版权信息</h2>
</div>
</template>
----最终效果如下:----
一、当路径是根路径时,router-view没有渲染试图
二、点击首页,路径切换,router-view渲染home组件
伞、点击关于,路径切换,router-view渲染about组件
vue-router细节处理:
- 路由的默认路径:
①默认情况下, 进入网站的首页, 我们希望<router-view>渲染首页的内容,但是我们的实现中, 默认没有显示首页组件, 必须让用户点击才可以。
②如何可以让路径默认跳到到首页, 并且<router-view>渲染首页组件呢,非常简单, 我们只需要配置多配置一个映射就可以了。
③我们在routes中又配置了一个映射,path配置的是根路径: /,redirect是重定向, 也就是我们将根路径重定向到/home的路径下, 这样就可以得到我们想要的结果了。
const routes =[
{
path: '/'
redirect: '/home'
}
]
- HTML5的History模式:
①我们前面说过改变路径的方式有两种:URL的hash,HTML5的history。默认情况下, 路径的改变使用的URL的hash,如果希望使用HT