Vue組件
- vue組件：封裝前端vue特效代碼，便于引用
- 全局組件
- 全局組件通過Vue.component在script標(biāo)簽中注冊
- 參數(shù)1：指定組件名稱
- 參數(shù)2：{}對象政恍，{}內(nèi)通過template指定組件要加載的內(nèi)容
- 全局組件調(diào)用：在div標(biāo)簽中通過組件名稱進(jìn)行調(diào)用
- 全局組件通過Vue.component在script標(biāo)簽中注冊
- 局部組件
- 局部組件定義：var 組件名稱={}對象，{}內(nèi)通過template指定組件要加載的內(nèi)容
- 在全局組件中定義components屬性，components:{}將局部組件注冊到全局組件中胸哥，進(jìn)行組件的嵌套
- 在全局組件的template屬性中調(diào)用局部組件
- 局部組件定義在全局組件之前橘忱，才能調(diào)用
- 組件中的數(shù)據(jù)綁定data赴魁，data屬性對應(yīng)的是一個函數(shù)方法，函數(shù)中返回綁定的數(shù)據(jù)
- 在template中對指定的數(shù)據(jù)進(jìn)行調(diào)用
- 組件傳值
- 父組件通過props屬性給子組件傳值
- 子組件中定義props:['用來接收父組件值的變量']
- 子組件template中調(diào)用該變量{{變量}}
- 全局組件中調(diào)用子組件時钝诚，通過v-bind:變量='父組件要傳的值'指定父組件的傳值
- 子組件通過$emit給父組件傳值
- 子組件template中綁定觸發(fā)事件<button v-on:click="isupload"> 上傳</button>
- 子組件定義 methods：{isupload：function（）{this.
emit 將事件和數(shù)據(jù)傳遞給父組件
- 父組件的子組件標(biāo)簽中綁定監(jiān)聽事件（處理子組件的事件）
- 父組件定義監(jiān)聽子組件事件的方法
- 父組件通過props屬性給子組件傳值
單文件組件
-
單文件組件：將一個組件相關(guān)的html結(jié)構(gòu)潘拱，css樣式和交互的Javascript從html文件剝離出來，合成的文件（一個組件具有了結(jié)構(gòu)拧略、表現(xiàn)和行為的完整功能芦岂，方便組合和重用），擴(kuò)展名為.vue
// 使用template標(biāo)簽來定義html部分 <template> </template> // javascript要寫成模塊導(dǎo)出的形式 <script> </script> // css樣式 <style> </style> -
環(huán)境配置（單文件組件不能直接運(yùn)行使用垫蛆，依賴于node項(xiàng)目對其進(jìn)行解析打包）
-
安裝node版本管理工具nvm
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash // 更新配置 source .bashrc 安裝最新版本的node
nvm install node更新npm的安裝源
npm config set registry https://registry.npm.taobao.org創(chuàng)建項(xiàng)目目錄
mkdir project-
進(jìn)入項(xiàng)目目錄禽最，初始化項(xiàng)目目錄
cd project npm init #初始化完成后在當(dāng)前目錄中會生成一個package.json文件，該文件指定項(xiàng)目所以依賴的模塊 -
配置package.json文件
{ "name": "project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "babel-core": "^6.22.1", "babel-loader": "^7.1.1", "babel-preset-env": "^1.3.2", "babel-preset-stage-2": "^6.22.0", "babel-register": "^6.22.0", "css-loader": "^0.28.11", "element-ui": "^2.7.2", "file-loader": "^1.1.4", "lodash": "^4.17.4", "style-loader": "^0.23.1", "url-loader": "^1.1.2", "vue": "^2.6.10", "vue-loader": "^15.7.0", "vue-router": "^3.0.2", "vue-style-loader": "^3.0.1", "vue-template-compiler": "^2.5.2", "webpack": "^4.29.6", "webpack-cli": "^3.3.0", "webpack-dev-server": "^3.2.1" } } #該文件定義了這個項(xiàng)目所需要的各種模塊月褥，以及項(xiàng)目的配置信息（比如名稱弛随、版本、許可證等元數(shù)據(jù)） -
安裝項(xiàng)目依賴模塊
npm install- npm install 命令根據(jù)這個配置文件宁赤，自動下載所需的模塊舀透，也就是配置項(xiàng)目所需的運(yùn)行和開發(fā)環(huán)境
-
創(chuàng)建項(xiàng)目文件 main.js ,index.html, App.vue
touch index.html main.js App.vue.- index.html文件時項(xiàng)目的首頁文件
- main.js 文件定義vue及調(diào)用單文件組件，也是項(xiàng)目打包時所依賴的文件
- App.vue文件為單文件組件文件
-
創(chuàng)建webpacke打包的配置文件webpack.config.js
const path = require('path') const VueLoaderPlugin = require('vue-loader/lib/plugin'); module.exports = { entry: { main: "./main.js" }, //入口文件 output: { filename: 'index.js', //出口文件名 path: path.resolve(__dirname), //當(dāng)前目錄 library: 'index' // 打包后模塊的名稱 }, plugins: [ // make sure to include the plugin for the magic new VueLoaderPlugin() ], module: { rules: [ //定義不同類型的文件使用的loader { test: /\.vue$/, loader: 'vue-loader' }, { test: /\.js$/, loader: 'babel-loader' }, { test: /\.css$/, loader: 'vue-style-loader', }, { test: /\.css$/, loader: 'css-loader', options: { minimize: true //添加 } }, { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file-loader' }, ] } } #在通過webpack對項(xiàng)目進(jìn)行打包時决左，需要指定相應(yīng)的配置文件愕够，同過配置文件對單文件組件中的各個內(nèi)容進(jìn)行解析，生成一個index.js的壓縮文件佛猛，在index.html只需引該文件就可進(jìn)行頁面加載渲染 -
目錄創(chuàng)建完成后的結(jié)構(gòu)
Snip20190404_1.png
-
-
單文件組件打包
- 項(xiàng)目搭建完成后需要分別對 main.js , index.html , App.vue 文件進(jìn)行編寫代碼
- 項(xiàng)目打包
npm run build- 文件編寫完成后并不能直接運(yùn)行index.html產(chǎn)生效果惑芭，需要對項(xiàng)目進(jìn)行打包生成一個渲染后的index.js文件進(jìn)行使用
- 打包后會在當(dāng)前目錄下生成一個index.js 文件，在index.html中引用該文件继找，運(yùn)行index.html文件看到效果
- 項(xiàng)目調(diào)試運(yùn)行
// 在項(xiàng)目目錄下遂跟，執(zhí)行下面指令可以開啟前端服務(wù)，自動運(yùn)行前端代碼 ./node_modules/.bin/webpack-dev-server
-
多個單文件組件使用
- 在project目錄下創(chuàng)建components文件夾，將所有子組件放入components文件夾下
- 多組件嵌套使用
- 在新建的components文件夾中定義多個子組件
- 在App.vue的script標(biāo)簽中導(dǎo)入并注冊多個子組件幻锁，在template標(biāo)簽中調(diào)用子組件
- npm run build 重新生成index.js文件
- 多組件路由使用（使用路由形式阻隔多個單路由）
- 定義路由目錄和路由文件router.js
- 在main.js文件中導(dǎo)入并使用router
- 在App.vue中指明路由標(biāo)簽
- 運(yùn)行項(xiàng)目
./node_modules/.bin/webpack-dev-server
-
Element-ui
- Element-ui將樣式封裝成單文件組件凯亮，可以直接集成到項(xiàng)目中
-從網(wǎng)址element中復(fù)制一段div標(biāo)簽，即樣式 - 將復(fù)制的樣式復(fù)制到components中.vue文件的template標(biāo)簽中（在template中新添加div標(biāo)簽）
- 在router.js中添加該樣式文件的路由匹配哄尔，進(jìn)行分發(fā)操作
- 在main.jszhong 導(dǎo)入ElementUI并使用
Vue.use(ElementUI)
- Element-ui將樣式封裝成單文件組件凯亮，可以直接集成到項(xiàng)目中
vue-cli的使用
- 借助vue-cli創(chuàng)建出我們的所有項(xiàng)目文件
- 步驟
- 全局安裝vue-cli
npm install --global vue-cli - 項(xiàng)目創(chuàng)建
vue init webpack 項(xiàng)目名 - 運(yùn)行調(diào)試項(xiàng)目
npm run dev在項(xiàng)目目錄下執(zhí)行此指令 - 項(xiàng)目打包
npm run build
- 全局安裝vue-cli
- 生成的目錄文件
- src假消，主開發(fā)目錄，要開發(fā)的單文件組件全部在這個目錄下
- static岭接，靜態(tài)資源目錄富拗，所有的css，js文件放在這個文件夾
- components鸣戴，組件目錄啃沪，vue格式的單文件組件都存在這個目錄中
- router，路由目錄葵擎，在此文件夾中配置組件路由
- node_modules目錄是node的包目錄
- config是配置目錄谅阿，build是項(xiàng)目打包時依賴的目錄
- 頁面結(jié)構(gòu)說明
-
整個項(xiàng)目是一個主文件index.html,index.html中會引入src文件夾中的main.js,main.js中會導(dǎo)入頂級單文件組件App.vue,App.vue中會通過組件嵌套或者路由來引用components文件夾中的其他單文件組件。
Snip20190404_6.png
-
