Vue組件
- vue組件：封裝前端vue特效代碼，便于引用
- 全局組件
- 全局組件通過Vue.component在script標簽中注冊
- 參數1：指定組件名稱
- 參數2：{}對象，{}內通過template指定組件要加載的內容
- 全局組件調用：在div標簽中通過組件名稱進行調用
- 全局組件通過Vue.component在script標簽中注冊
- 局部組件
- 局部組件定義：var 組件名稱={}對象，{}內通過template指定組件要加載的內容
- 在全局組件中定義components屬性，components:{}將局部組件注冊到全局組件中，進行組件的嵌套
- 在全局組件的template屬性中調用局部組件
- 局部組件定義在全局組件之前，才能調用
- 組件中的數據綁定data，data屬性對應的是一個函數方法，函數中返回綁定的數據
- 在template中對指定的數據進行調用
- 組件傳值
- 父組件通過props屬性給子組件傳值
- 子組件中定義props:['用來接收父組件值的變量']
- 子組件template中調用該變量{{變量}}
- 全局組件中調用子組件時，通過v-bind:變量='父組件要傳的值'指定父組件的傳值
- 子組件通過$emit給父組件傳值
- 子組件template中綁定觸發事件<button v-on:click="isupload"> 上傳</button>
- 子組件定義 methods：{isupload：function（）{this.
emit 將事件和數據傳遞給父組件
- 父組件的子組件標簽中綁定監聽事件（處理子組件的事件）
- 父組件定義監聽子組件事件的方法
- 父組件通過props屬性給子組件傳值
單文件組件
-
單文件組件：將一個組件相關的html結構，css樣式和交互的Javascript從html文件剝離出來，合成的文件（一個組件具有了結構、表現和行為的完整功能，方便組合和重用），擴展名為.vue
// 使用template標簽來定義html部分 <template> </template> // javascript要寫成模塊導出的形式 <script> </script> // css樣式 <style> </style> -
環境配置（單文件組件不能直接運行使用，依賴于node項目對其進行解析打包）
-
安裝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創建項目目錄
mkdir project-
進入項目目錄，初始化項目目錄
cd project npm init #初始化完成后在當前目錄中會生成一個package.json文件，該文件指定項目所以依賴的模塊 -
配置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" } } #該文件定義了這個項目所需要的各種模塊，以及項目的配置信息（比如名稱、版本、許可證等元數據） -
安裝項目依賴模塊
npm install- npm install 命令根據這個配置文件，自動下載所需的模塊，也就是配置項目所需的運行和開發環境
-
創建項目文件 main.js ,index.html, App.vue
touch index.html main.js App.vue.- index.html文件時項目的首頁文件
- main.js 文件定義vue及調用單文件組件，也是項目打包時所依賴的文件
- App.vue文件為單文件組件文件
-
創建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), //當前目錄 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對項目進行打包時，需要指定相應的配置文件，同過配置文件對單文件組件中的各個內容進行解析，生成一個index.js的壓縮文件，在index.html只需引該文件就可進行頁面加載渲染 -
目錄創建完成后的結構
Snip20190404_1.png
-
-
單文件組件打包
- 項目搭建完成后需要分別對 main.js , index.html , App.vue 文件進行編寫代碼
- 項目打包
npm run build- 文件編寫完成后并不能直接運行index.html產生效果，需要對項目進行打包生成一個渲染后的index.js文件進行使用
- 打包后會在當前目錄下生成一個index.js 文件，在index.html中引用該文件，運行index.html文件看到效果
- 項目調試運行
// 在項目目錄下，執行下面指令可以開啟前端服務，自動運行前端代碼 ./node_modules/.bin/webpack-dev-server
-
多個單文件組件使用
- 在project目錄下創建components文件夾，將所有子組件放入components文件夾下
- 多組件嵌套使用
- 在新建的components文件夾中定義多個子組件
- 在App.vue的script標簽中導入并注冊多個子組件，在template標簽中調用子組件
- npm run build 重新生成index.js文件
- 多組件路由使用（使用路由形式阻隔多個單路由）
- 定義路由目錄和路由文件router.js
- 在main.js文件中導入并使用router
- 在App.vue中指明路由標簽
- 運行項目
./node_modules/.bin/webpack-dev-server
-
Element-ui
- Element-ui將樣式封裝成單文件組件，可以直接集成到項目中
-從網址element中復制一段div標簽，即樣式 - 將復制的樣式復制到components中.vue文件的template標簽中（在template中新添加div標簽）
- 在router.js中添加該樣式文件的路由匹配，進行分發操作
- 在main.jszhong 導入ElementUI并使用
Vue.use(ElementUI)
- Element-ui將樣式封裝成單文件組件，可以直接集成到項目中
vue-cli的使用
- 借助vue-cli創建出我們的所有項目文件
- 步驟
- 全局安裝vue-cli
npm install --global vue-cli - 項目創建
vue init webpack 項目名 - 運行調試項目
npm run dev在項目目錄下執行此指令 - 項目打包
npm run build
- 全局安裝vue-cli
- 生成的目錄文件
- src，主開發目錄，要開發的單文件組件全部在這個目錄下
- static，靜態資源目錄，所有的css，js文件放在這個文件夾
- components，組件目錄，vue格式的單文件組件都存在這個目錄中
- router，路由目錄，在此文件夾中配置組件路由
- node_modules目錄是node的包目錄
- config是配置目錄，build是項目打包時依賴的目錄
- 頁面結構說明
-
整個項目是一個主文件index.html,index.html中會引入src文件夾中的main.js,main.js中會導入頂級單文件組件App.vue,App.vue中會通過組件嵌套或者路由來引用components文件夾中的其他單文件組件。
Snip20190404_6.png
-
