用vue.js學習es6（一）：基本工具及配置

一.工具：

　　sublime,node.js,npm

　　1.安裝sublime 的es6插件：

　　（1）.在sublime中按Ctrl+`調出console

　　（2）.粘貼如下代碼到底部命令行並回車（sublime 3）：

　　　　import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path();urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler())); open(os.path.join(ipp,pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

　　（sublime 2）:

　　　　import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_packages_path(); os.makedirs( ipp ) if not os.path.exists(ipp) else None; urllib2.install_opener( urllib2.build_opener( urllib2.ProxyHandler( ))); open( os.path.join( ipp, pf), 'wb' ).write( urllib2.urlopen( 'http://sublime.wbond.net/' +pf.replace( ' ','%20' )).read()); print( 'Please restart Sublime Text to finish installation')

　　（3）.重啓Sublime

　　（4）.若是在Perferences->package settings中看到package control這一項，則安裝成功

　　（5）.按下Ctrl+Shift+P調出命令面板,輸入javascriptNext：能夠看到有es6插件回車安裝

　　2.將npm變成cnpm:npm install -g cnpm --registry=https://registry.npm.taobao.org

　　　　注意：只有npm版本大於3.0.8才能夠使用vue，npm升級:npm i npm g(最新)

　　3.安裝webpack:cnpm install vue -g 

　　4.安裝vue命令行工具:cnpm install -g vue-cli

二.步驟：(注意)

　　1.創建文件夾：名字叫vue

　　2.建立項目：C:\vue>vue init webpack es6

　　配置以下：

　　? Project name es6
　　? Project description A Vue.js project
　　? Author wzh
　　? Vue build standalone
　　? Use ESLint to lint your code? No
　　? Setup unit tests with Karma + Mocha? Yes
　　? Setup e2e tests with Nightwatch? Yes

　　3.安裝package.json中的插件：

　　（1）.進入es6文件夾：C:\vue>cd es6

　　（2）.C:\vue\es6>cnpm install

　　4.運行：npm run dev

　　若是自動打開了網頁（http://localhost:8080/）顯示vue的圖標以及一些文字就說明運行成功了。

　　5.找到C:\vue\es6\src\components\Hello.vue文件修改：

　　　　<script>

　　　　export default {

　　　　　　name: 'hello',

　　　　　　data () {

　　　　　　　　studyEs6();

　　　　　　　　return {

　　　　　　　　　　msg: '歡迎 to Your Vue.js App'

　　　　　　　　}

　　　　　　}

　　　　}

　　　　function studyEs6(){

　　　　　　alert("學習es6");

　　　　}

　　</script>

　　添加了函數studyEs6()這樣就能夠執行es6語法了