Vue脚手架（Vue CLI）

2021-06-17  本文已影响0人  想吃热干面了

一、什么是Vue CLI

二、安装脚手架 CLI

三、创建项目

1.ESLint规范

一种代码规范，如果不符合要求，那么启动服务时会报错。新手不建议使用。可以在index.js中 useEslint: true属性选择是否使用。

2.runtime-compiler和runtime-only的区别

二者中只有main.js文件不同

过程：template解析成ast（抽象语法树）；ast再编译成render函数；然后转为虚拟dom；最后转化为真实Dom。

过程：render函数转为虚拟dom；最后转化为真实Dom。

runtime-only比对runtime-compiler，减少了解析成render函数的过程。vue-template-compiler这个插件帮助了我们做了这个过程。

3.render函数

首先了解一下createElement函数
new Vue({
  el: '#app',
  // components: { App },
  // template: '<App/>'
    render: function (createElement) {
        //1.普通用法：createElement('标签', {标签的属性}, [显示内容]) 自定义内容
      return createElement('h2',
        {class: 'box'},
        ['Hello World'], createElement('button'), ['按钮'])
        //2.核心用法：传入组件对象 函数还可以传入组件对象，那么我们就可以吧app组件直接传入
        return createElement(App)
    }
  })

第二种用法就是render函数，即runtime-only中的main.js，这里是没有template的。

1.跟Vue CLI2的区别

vue-cli3是基于webpack4打造，vue2还是webpack3；
vue-cli3的设计原则是“0配置”，移除配置文件跟目录下的build和config等目录；
vue-cli3提供了vueui命令，提供了可视化配置，更加人性化；
移除了static文件家，新增了public文件夹，并且index.html移动到public文件夹。

2.创建项目

vue create my-project
vuecli3.png
vue3项目结构.png
main.js
new Vue({
  render: h => h(App),
}).$mount('#app')

[.$mount('#app')] 等同于 [el: '#app']

3.配置去哪了

从上面的项目结构中可以看出，同脚手架2比少了配置文件，那么配置文件放在哪里了呢？

在脚手架3中，如果要修改配置，有三种方案

四、Vue-Router（路由）

1.认识路由

路由：通过互联的网络把信息从原地址传输到目的地址的活动
生活中实例：比如路由器。
路由器提供了两种机制：路由和传送
路由：决定数据包从来源到目的的路径
传送：将输入端的数据转移到合适的输出端

2.前端渲染和后端渲染

2.1 第一阶段： 后端渲染

最早期：jsp 包含html+css+java代码（从数据库中读取信息动态放在页面中），称为服务端渲染，即后端渲染。
后端路由：后端处理URL和页面之间的映射关系

2.2 第二个阶段：前后段分离 Ajax

后端只负责提供数据，不负责任何阶段的内容
浏览器中显示的网页中的大部分内容，都是由前端写的js代码在浏览器中执行，最终渲染出来的网页

2.3 第三个阶段 SPA页面 前端路由

在前后段分离的基础上加了前端路由
SPA:单页面富应用，整个页面只有一个html页面，一个url对应一个组件（即页面），有前端维护，所以叫前端路由
前段路由的核心：改变URL页面不进行整体的刷新（前端控制，不与后台交互）

3.如何保证改变URL页面不会刷新

3.1 通过改变hash改变url
3.2 HTML5的history模式：pushState
  history.pushState({}, '', 'url')  
  history.back()        等同于 history.go(-1)     后退
  history.forward()     等同于 history.go(1)      前进
pushState.png

会将url压入栈结构中，先进后出


栈结构.jpg
3.3 HTML5的history模式：replaceState
  history.replaceState({}, '', 'home')

与pushState不同的是，replaceState是替换url，无法返回


replace.png
3.4 HTML5的history模式：go
  history.go(-2)

与pushState一起使用
back、forward、go三个接口等同于浏览器界面的前进后退


go.png

4.安装和使用Vue-router

4.1 安装(脚手架已选择的的话不用再次安装)
 npm install vue-router --save
4.2 在src文件夹下创建router文件夹，并创建index.js文件
4.3 在index中配置所有路由信息
//配置路由相关信息
import VueRouter from 'vue-router'
import Vue from 'vue'

//1.通过Vue.use（插件），安装插件
Vue.use(VueRouter)

//2.创建VueRouter对象
const routes = [

]
const router = new VueRouter({
  routes
})

//3.将router对象传入到Vue实例 导出
export default router
4.3 在mian.js中导入
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

简单配置实现，但还没有配置映射信息

5.配置映射信息

5.1 创建路由组件

在components文件夹下创建路由组件

5.2 配置映射信息：组件和路径映射关系
import home from '../components/Home.vue'
import about from '../components/About.vue'
const routes = [
  {
    path: '/home',
    component: home
  },
  {
    path: '/about',
    component: about
  }
]
5.3 使用路由：通过<router-link>和<router-view>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    <router-view></router-view>
  </div>

在App.vue中配置，<router-view>起到占位作用，路由指向的组件将会渲染拿到<router-view>的位置。

5.4 路由的默认值
  const routes = [
    {
      path: '',
      redirect: '/home'
    },
  ]

在打开网页时，一般情况都是默认直接打开首页，这是使用redirect重定向到home，即可。

5.5 url修改为history模式
url的默认模式时hash模式：
  [http://localhost:8080/#/home](http://localhost:8080/#/home)
可以在new VueRouter中添加属性来改变
  const router = new VueRouter({
    routes,
    mode: 'history'
  })
history模式：没有# 更美观
  [http://localhost:8080/home](http://localhost:8080/home)
5.6 router-link的其他属性补充

6.通过代码跳转路由

<div id="app">
  <h2>我是App组件</h2>
  <button @click="homeClick">首页</button>
  <button @click="aboutClick">关于</button>
  <router-view></router-view>
</div>

<script>
export default {
  name: 'App',
  methods: {
    homeClick() {
      // this.$router.push('/home')
      this.$router.replace('/home')
    },
    aboutClick() {
      // this.$router.push('/about')
      this.$router.replace('/about')
    }
  }
}
</script>

6.动态路由的使用

[http://localhost:8080/user]

在进入用户界面时，要求在路由上显示出当前用户的id，即例如[http://localhost:8080/user/zhangsan]的时候，我们称之为动态路由

6.1 动态路由的实现
  App.vue中
 <template>
  <div id="app">
    <router-link v-bind:to="'/user/'+userId">用户</router-link>
    <router-view></router-view>
  </div>
</template>
<script>
  export default {
     data() {
       return {
         userId: 'zhangsan'
       }
     },
  ｝
 </script>

  index.js的routers中
  const routes = [
    {
      //此处userId会取到App.vue中v-bind:to="'/user/'+userId"的数据
      path: '/user/:userId',
      component: User
    }
  ]

  路由中显示已达成，如何显示到界面中
  User.vue中
  <template>
    <div>
      <h2>我是用户界面</h2>
      <p>我是用户信息，嘿嘿嘿</p>
      使用计算属性：<h2>{{userId}}</h2>
      不使用计算属性：<h2>{{$route.params.userId}}</h2>
    </div>
  </template>

  <script>
    export default {
      name: "user",
      computed: {
        //指向哪个路由，就会拿到哪个路由
        userId() {
          //userId指向的是index.js中path里的userId
          return this.$route.params.userId;
        }
      }
    }
  </script>

7.打包文件的解析

vue-cli不会只打包一个js文件，而是对js文件进行分包，css文件也一样。


打包文件.png
js文件夹中：

五、Vuex

六、网络请求封装（axios）

上一篇下一篇

猜你喜欢

热点阅读