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)