vue路由跟上.html,09、Vue-cli脚手架创建项目、前端路由之URL的hash和HTML5的History两种模式...

Vue CLI

CLI是什么意思？

CLI是Command-Line Interface，翻译为命令行界面，俗称脚手架

Vue CLI是一个官方发布的vue.js项目脚手架

使用脚手架可以快速搭建Vue开发环境以及对应的Webpack配置

Runtime + Compiler

new Vue({

el: ‘#app‘,

template: ‘‘,

components: {

App

}

})

main.js，采用的是我们之前的写法。

Runtime-only(以后一直是这种)

new Vue({

el: ‘#app‘,

render: h => h(App),

})

main.js，新的函数render，新的写法。

render: h => h(App)

//箭头函数的原型

render: function(h) {

return h(App);

}

import Vue from ‘vue‘

import App from ‘./App.vue‘

render: function(createElement) {

//传入一个组件对象

return createElement(‘App‘);

}

Vue程序的执行过程：

template模板代码 ---> ast(抽象语法树) ---> render() ---> 虚拟DOM ---> UI

Vue CLI 的使用

安装Vue脚手架

npm install -g @vue/cli

C:\Users\shawn>vue --version

@vue/cli 4.3.1

vue-cli 3与2版本有很大的区别

vue-cli 3是基于webpack4打造，vue-cli 2还是基于webpack3

vue-cli 3的设计原则是"0配置"，移除build和config文件夹

移除了static文件夹，增加了public文件夹，并且index.html移动到public中

vue-cli 3提供了vue ui命令，提供了可视化配置

脚手架创建项目

vue-create

vue create vuecli

你会被提示选取一个 preset(预设配置)。你可以选默认的包含了基本的 Babel + ESLint 设置的 preset，也可以选“手动选择特性”来选取需要的特性。

这个默认的设置非常适合快速创建一个新项目的原型，而手动设置则提供了更多的选项，它们是面向生产的项目更加需要的。

如果你决定手动选择特性，在操作提示的最后你可以选择将已选项保存为一个将来可复用的 preset。

我们这里回车选择手动。

(通过上下键选择选项，空格选中或不选)

如果选择保存，那么这个配置会保存在C:\Users\shawn\.vuerc文件中。

{

"useTaobaoRegistry": false,

"presets": {

"lwj": {

"useConfigFiles": true,

"plugins": {

"@vue/cli-plugin-babel": {}

}

}

},

"latestVersion": "4.4.6",

"lastChecked": 1595209462544

}

启动项目

npm run serve

图形化界面

你也可以通过 vue ui 命令以图形化界面创建和管理项目：

上述命令会打开一个浏览器窗口，并以图形化界面将你引导至项目创建的流程。

C:\Users\shawn>vue ui

?? Starting GUI...

?? Ready on http://localhost:8000

图形化界面不仅可以创建项目，同样可以管理依赖(导入)。

前端路由

URL的hash和HTML5的history

URL的hash

url的hash也就是锚点(#)，本质上是改变windows.location的href属性

我们可以通过直接赋值location.hash来改变href，但是页面不发生刷新

location.hash

""

location.hash = "bar";

"bar"

location.href

"http://localhost:8080/#bar"

location.hash = "/foo";

"/foo"

location.href

"http://localhost:8080/#/foo"

HTML5的history：页面同样不会刷新，但是url中是没有#的。

history.pushState() //相当于入栈一个url

history.back() //弹出栈顶的url

histroy.replaceState({},‘‘,‘home‘); //没有历史记录，不能后退

history.go(-1) //回退 等价于 history.back()

history.go(1) //前进 等价于 history.forward()

history.pushState({}, ‘‘, ‘/home‘);

undefined

location.href

"http://localhost:8080/home"

history.back();

undefined

location.href

"http://localhost:8080/"

后端渲染：

jsp：Java Server Page

后端路由：

后端处理url和页面之间的映射关系。

前后端分离：后端只负责提供数据，不负责任何界面的内容。

前端渲染：

浏览器中显示的网页大部分内容都是由前端写的js代码在浏览器中执行，最终渲染出来的网页。

前端路由：

单页面引用，前端路由的核心：改变url但是页面不进行整体的刷新。

原文：https://www.cnblogs.com/shawnyue-08/p/13344385.html