vue學習筆記01

使用vscode配置vue項目

---

由於以前我沒有接觸過vue.js，之前的網頁也是用Thymeleaf或者jsp寫的，此次要求用vscode寫vue,感受如今前端招聘需求量最大的也是這個技術，恰好本身也想學一下這個，就摸索會寫寫隨筆。

1、配置環境

在官網下載vscode,安裝完再把語言改爲中文的。
按ctrl+Shift+X進入插件商店，安裝和vue有關的兩個插件vetur(文件高亮)和ESLint(代碼格式規範).
在文件-首選項-設置 找到用戶設置配置設置信息：
"emmet.syntaxProfiles": {"vue-html":"html","vue":"html"
}
"javascript","javascriptreact","html","vue" ],"eslint.options": {"plugins": ["html"]
},

---

建立vue項目

一：首先要保證本身的電腦裝了node.js,安裝完了纔可使用。下載node.js一直下一步，安裝完成後再控制檯輸入node-v查看版本號，若是有的話說明安裝成功了。npm(JavaScript 世界的包管理工具）集成在node.js中，輸入npm -v就看獲得npm的版本號。

二：安裝cnpm(淘寶的npm),npm的資源在國外，因此有時候安裝依賴包會失敗，因此須要國內鏡像。在命令行中輸入 npm install -g cnpm --registry=http://registry.npm.taobao.org 而後等待。

三：安裝vue-cli腳手架構建工具
這個是用來構造比較大型的項目，比如工地的腳手架，架子搭建好了，利用它能夠搞定目錄結構，本地調試，單元測試，熱加載及代碼部署等。纔剛入門好像還用不到這個，直接在網頁上引用vue就能夠了...不過也蠻裝一下，之後說不許要用。安裝命令：npm install -g vue-cli

四：按Ctrl+~打開vscode終端，輸入vue init webpack yourProjectName，yourProjectName就是項目名稱，而後底下會有一大堆提示，例如肯定項目名，做者名，是否用eslint等，所有默認加yes就ok了。

運行vue項目

等上面的都加載完了輸入 npm run dev 就能夠在http://localhost:8080訪問你構造的網頁了。若是碰到missing script:dev錯誤，說明你package.js裏面的dev路徑和如今所在路徑不同，cd到package.js裏面的路徑再從新運行就能夠了。或者你下載了別人的項目，文件夾package.js裏的scripts確實沒有dev,就須要你從新npm intall 安裝依賴，最後 npm run dev便可，start, build丟失同理。

普通網頁嵌入vue

1.使用 script 引入VUE 的包
2.在index.html 頁面建立 id=app 的div
3.經過 new Vue 獲得一個 vm 的實例,並配置
html中的代碼

<div id="app">
        <p>{{a}}</p>
 </div>

js中的代碼

var vm=new Vue({
    el:'#app',
    data() {
        return {
            a:'zhangjian'
        }
    },
})

要實現其餘的例如表格，下拉框等應該也相似。

vscode直接打開html的插件：
open in browers：使用alt+b運行，或者切換alt+shift+b切換不一樣瀏覽器運行，而且能夠運行多個界面

view in browers：在本身想打開的htm目錄中右鍵，出現view in browser便可運行打開，可是它只能打開一個界面，每次想運行下一個界面的時候，必須把前面一個界面關掉。