vue第12天：webpack处理Vue，webpack项目中路由的配置，Vue脚手架的使用 vue-cli：介绍、基本使用、步骤、目录说明，单文件组件的基本概念

webpack处理vue

vue单文件组件的介绍

single-file components(单文件组件) ，文件扩展名为 .vue 的文件，需要安装vetur插件

以前定义组件非常麻烦, 需要写 template模板, 在里面需要写模板字符串, 但有了单文件组件就不用了

单文件组件文档

优势：

• 完整语法高亮
• CommonJS 模块
• 组件作用域的 CSS

单文件组件的结构说明

<template>
  <div>
    <h1>这是单文件组件的模板内容</h1>
  </div>
</template>

<script>
// 这是组件的js代码
export default {
  data () {
    return {
      msg: 'hello vue'
    }
  }
}
</script>

<style>
/* 这是单文件组件的样式 */
h1 {
  color: red;
}
</style>

webpack处理单文件 - vue-loader的配置

安装vue

yarn add vue

• 提供App.vue组件

<template>
  <div id="app">我是app</div>
</template>

<script>
export default {

}
</script>

<style>

</style>

• 编写入口文件main.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  // render函数用于渲染一个组件作为根组件（固定写法）
  render (createElement) {
    // 把App组件作为根组件
    return createElement(App)
  }
})

Vue Loader 是一个 webpack 的 loader，它允许你以一种名为单文件组件 (SFCs)的格式撰写 Vue 组件：

• 安装依赖包

yarn add vue-loader vue-template-compiler -D

• webpack配置

// webpack.base.js
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      // ... 其它规则
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    // 请确保引入这个插件！
    new VueLoaderPlugin()
  ]
}

• 全部写完之后记得重新用一下命令：

yarn dev

单文件组件使用的演示

三部分结构 => template, script, style

// 结构
<template>
  
</template>


// 行为
<script>
export default {

}
</script>


// 样式
<style>

</style>

组件的全局定义和局部定义

使用单文件组件, 进行组件的全局定义和局部定义

需求: 定义黑马头部组件 和 黑马底部组件

import Jack from ‘./Jack.vue’

Vue.component(‘jack’, Jack)

webpack项目中路由的配置

基本步骤

• 新建components文件夹，存放Home.vue组件和Login.vue组件
• 安装vue-router

yarn add vue-router

• 创建路由实例

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

import Home from './components/Home.vue'
import Login from './components/Login.vue'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/home', component: Home },
    { path: '/login', component: Login }
  ]
})

new Vue({
  el: '#app',
  // render函数用于渲染一个组件作为根组件（固定写法）
  render (createElement) {
    // 把App组件作为根组件
    return createElement(App)
  },
  router
})

抽取路由代码

把路由功能从main.js中抽取出来

新建router/index.js文件

// 配置所有的路由的功能
// 模块化环境开发
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue'
import Home from '../components/Home.vue'
Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/login', component: Login },
    { path: '/home', component: Home}
  ]
})

export default router

修改main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  el: '#app',
  // render函数用于渲染一个组件作为根组件（固定写法）
  render (createElement) {
    // 把App组件作为根组件
    return createElement(App)
  },
  router
})

vue脚手架的使用 vue-cli

用vue-cli可以帮助我们去创建项目，建目录，建文件 => 还会帮你配好webpack

脚手架的意义

• 脚手架是开发现代web应用的必备
• 充分利用webpack，babel，eslint等工具辅助项目开发
• 开箱即用，零配置，无需手动配置繁琐的工具即可使用
• vue脚手架还提供了配套的图形管理界面，用于创建，开发和管理你的项目

使用vue脚手架搭建项目

注意：如果使用 vue -V 此命令看到了vue-cli版本是 2.x的版本，请先卸载再重新安装最新的版本

yarn global remove vue-cli

• 初始化命令

# 全局安装 vue命令
yarn global add @vue/cli   如果装不上用：npm i @vue/cli -g

vue -V  查看版本

• 创建项目

vue create 项目名

先cd到项目目录, 再启动:
yarn serve

• 选择预设

• 选择项目的功能

按空格进行选择，按回车进行下一步

• 选择路由的风格

• 选择css预处理语言

• 选择代码规范

• 选择校验规则

• 配置文件的生成方式

• 保存配置

• 给预设起名字

• 启动项目（项目根目录下）

yarn serve

webpack配置

vue已经提供了webpack的默认配置，也可以通过在根目录中创建vue.config.js文件添加自己的配置

// 自动打开浏览器
module.exports = {
  devServer: {
    open: true
  }
}

项目目录说明

• .editorcofnig 需要给vscode安装要给插件EditorConfig
• eslintrceslint的配置文件，一般不用手动配置
• .gitignore git的忽视文件

单文件组件

基本概念

single-file components(单文件组件) ，文件扩展名为 .vue 的文件

单文件组件文档

优势：

• 完整语法高亮
• CommonJS 模块
• 组件作用域的 CSS

单文件组件的结构说明

<template>
  <div>
    <h1>这是单文件组件的模板内容</h1>
  </div>
</template>

<script>
// 这是组件的js代码
export default {
  data () {
    return {
      msg: 'hello vue'
    }
  }
}
</script>

<style>
/* 这是单文件组件的样式 */
h1 {
  color: red;
}
</style>