webpack处理vue
vue单文件组件的介绍
single-file components(单文件组件) ,文件扩展名为 .vue
的文件,需要安装vetur
插件
以前定义组件非常麻烦, 需要写 template模板, 在里面需要写模板字符串, 但有了单文件组件就不用了
优势:
单文件组件的结构说明
<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
eslintrc
eslint的配置文件,一般不用手动配置.gitignore
git的忽视文件
单文件组件
基本概念
single-file components(单文件组件) ,文件扩展名为
.vue
的文件
优势:
单文件组件的结构说明
<template>
<div>
<h1>这是单文件组件的模板内容</h1>
</div>
</template>
<script>
// 这是组件的js代码
export default {
data () {
return {
msg: 'hello vue'
}
}
}
</script>
<style>
/* 这是单文件组件的样式 */
h1 {
color: red;
}
</style>