vue-cli
安装
npm i -g @vue/cli
vue-cli 的作用
- 是用来快速生成vue项目的脚手架
这个项目脚手架 webpack 构建的，依赖 webpack 打包；
使用 vue-cli 创建一个项目
# vue create 项目名称
vue create gx-app
# 进入项目目录
cd gx-app
# 启动项目
npm run serve
vue-cli 创建项目的模式
创建项目的模式有两种
- default（默认）
- 自定义
vue-loader
vue-loader 会把一个 *.vue 的文件，编译成一个js对象；
它用于处理 vue文件
<template>会被vue 的 render函数直接渲染；
<template></template>
<script>部分，里面用es6 export default 导出的对象 会被直接合并到上面的<template>，然后生成一个组件对象；
<script></script>
<style>部分，会被直接生成为 css的样式，添加到页面的<head>里；
<style></style>
Google浏览器中的 vue 调试工具
首先要能访问 google 的应用商店；
Vue.js devtools
https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?utm_source=chrome-ntp-icon
工具 vs code
插件安装 ：扩展商店 搜索 vue，前两个都要安装
在 .vue 文件中，快速生成结构
vbase
使用less
vue-cli 中的 less 是已经配置好的，要使用 less 的话，安装一下 loader 就好了；
# 安装 less loader
npm i less-loader
# 安装 less 并添加到依赖中
npm i less -D
然后在 .vue 文件的样式标签上添加 lang属性就好了
<style lang="less" scoped>
...
</style>
scoped: 添加上这个属性，说明这个样式是局部作用；
在组件中使用 template
在组件中使用 template会报错，将导入的 vue 修改成 esm 版本的就好了；
【main.js】
import Vue from 'vue'
修改成：
import Vue from 'vue/dist/vue.esm'
插件
- 在
src下新建my-plugin/index.js文件
export default {
install(Vue, options) {
// input组件
Vue.component('gx-input', {
template: `
<div>
<input type="text" />
</div>
`
});
// 过滤器 ...
}
}
- 使用插件，在 vue 实例之前注册插件，就可以在实例中或者是组件中使用插件了，使用方法看插件是过滤器啊还是什么，按各自的方法使用；
【main.js】
// 导入插件
import myPlugin from './my-plugin/index'
// 注册插件
Vue.use(myPlugin)