ch01-vue.js簡介、環境搭建及腳手架工具

Tychio 發布于2019-08-20 15:41 / 1262人閱讀

摘要：一簡介是一個用于構建交互式界面的直觀快速和可組合的框架。的兼容性不支持及其以下版本，因為使用了不能模擬的特性。這是簡潔的語法和強勁的性能的基礎。的組件一個文件由三部分組成，分別體現為個標簽。

一、Vuejs簡介

Vue.js - Intuitive, Fast and Composable MVVM for building interactive interfaces.

vue.js是一個用于構建交互式界面的直觀、快速和可組合的MVVM框架。易用，只要你會前端開發的“三大件”就可以閱讀文檔開始用vue.js構建應用；靈活，簡單小巧的核心，漸進式技術棧，足以應付任何規模的應用；性能，17kb min+gzip的運行大小，
超快虛擬DOM，最省心的優化。

vue.js的兼容性

Vue.js 不支持 IE8 及其以下版本，因為 Vue.js 使用了 IE8 不能模擬的 ECMAScript 5 特性。 Vue.js 支持所有兼容 ECMAScript 5 的瀏覽器。

Vue.js 內部使用 ES5 的 Object.defineProperty 來轉化對象屬性為 getter 和 setter，并在 getter 和 setter 中 emit 事件來實現對對象屬性變化的觀察。這是 Vue.js 簡潔的語法和強勁的性能的基礎。IE8 的該方法不能作用于 JS 對象，也沒有辦法模擬。

vue.js的組件

一個.vue文件由html、js、css三部分組成，分別體現為3個標簽：、、。

vue.js的入門項目

todolist

賣座網

二、vue.js環境搭建及腳手架工具

可以使用NPM安裝

#最新穩定版本
npm install vue

#最新穩定 CSP兼容版本
npm install vue@csp

node.exe下載地址
git.exe下載地址

#git安裝
git clone https://github.com/vuejs/vue.git node_modules/vue
cd node_modules/vue
npm install
npm run build

淘寶 NPM 鏡像（不推薦使用，除非網速實在太慢；因為有些依賴的包下載不完全）

#使用淘寶定制的 cnpm (gzip 壓縮支持) 命令行工具代替默認的 npm
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

官方命令行工具--vue-cli

# 全局安裝 vue-cli
npm install --global vue-cli
#創建一個基于 webpack 模板的新項目
vue init webpack my-project
#切換到項目安裝依賴，走你
cd my-project
npm install
npm run dev

安裝過程中的提示
了解package.json文件
-devDependencies下為項目依賴的包，其中一系列babel包用來解析[ES6](http://es6.ruanyifeng.com/)
了解webpack
-修改默認端口8080，在webpack.config.js文件中的devServer 添加 port:新端口號
了解vue.js基本項目結構及主要文件
-使用webpack-simple模板：
    myproject
    -node——moudles
    +src
        +assets
            -logo.png
        -App.vue
        -main.js
    -.babelrc
    -.gitignore
    -index.html
    -package.json
    -README.md
    -webpack.config.js
了解vue.js組件的重要選項：data、methods(this)、watch(監聽 val oldval)
了解vue.js的模板指令：
- 數據渲染 v-html v-text {{}}
- 模板控制指令 v-if v-show
- 渲染循環列表 v-for 
- 事件綁定  v-on @  
- 屬性綁定 v-bind   
了解 es6

v-text 與v-html的不同（看文檔）
v-for的使用 （尤其怎么遍歷雙重數據）
v-bind

踩過的坑：
1、npm install的時候，顯示有一個錯誤：node-sass安裝失敗；嘗試了好幾次還是失敗，解決方案：用cnpm安裝（已經是迫不得已了！）

友情鏈接

vue.js官方資料:vuejs官網、vuejs github倉庫

vue案例：[cody]、 awesome-vue

GPU云服務器云服務器 php開發工具簡介遷移工具及費用 php環境及配置教程 JS壓縮及混淆工具

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82413.html

大前端2018現在上車還還得及么

摘要：面向對象三大特征繼承性多態性封裝性接口。第五階段封裝一個屬于自己的框架框架封裝基礎事件流冒泡捕獲事件對象事件框架選擇框架。核心模塊和對象全局對象，，，事件驅動，事件發射器加密解密，路徑操作，序列化和反序列化文件流操作服務端與客戶端。第一階段： HTML+CSS:HTML進階、CSS進階、div+css布局、HTML+css整站開發、 JavaScript基礎：Js基礎教程、js內置對...

stormgens 2019-08-01 18:25 評論0 收藏0
大前端2018現在上車還還得及么

摘要：面向對象三大特征繼承性多態性封裝性接口。第五階段封裝一個屬于自己的框架框架封裝基礎事件流冒泡捕獲事件對象事件框架選擇框架。核心模塊和對象全局對象，，，事件驅動，事件發射器加密解密，路徑操作，序列化和反序列化文件流操作服務端與客戶端。第一階段： HTML+CSS:HTML進階、CSS進階、div+css布局、HTML+css整站開發、 JavaScript基礎：Js基礎教程、js內置對...

mylxsw 2019-08-22 13:49 評論0 收藏0
可視化爬蟲配置chrome插件開發之搭建vue開發環境

摘要：使用開發插件的好處本次開發的插件是抓取配置插件，有很多的表單以及彈出層，如果純使用的話會有很多動態創建的操作。使用和的語法以及的加載器相配合，可以減少大量動態創建的代碼。使用vue開發chrome插件的好處本次開發的插件是抓取配置插件，有很多的form表單以及彈出層，如果純使用js的話會有很多動態創建dom的操作。使用vue和ES6的import語法以及webpack的html加載...

impig33 2019-08-16 13:25 評論0 收藏0
vue + vuex + koa2開發環境搭建及示例開發

摘要：開發既是一個練習如何在開發環境中寫代碼的過程，反過來，也是一個驗證環境搭建的對不對好不好用的過程。前端調用后端接口示例為突出重點，排除干擾，方便理解。寫在前面這篇文章的主要目的是學會使用koa框架搭建web服務，從而提供一些后端接口，供前端調用。搭建這個環境的目的是：前端工程師在跟后臺工程師商定了接口但還未聯調之前，涉及到向后端請求數據的功能能夠走前端工程師自己搭建的http路徑...

xioqua 2019-08-22 13:56 評論0 收藏0