vue+vue-router+webpack框架搭建

《vue+vue-router+webpack框架搭建》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在行業(yè)資料-天天文庫。

1、1.框架介紹本次前端框架采用Vue+Vue-router+Webpack來進(jìn)行單頁面Web應(yīng)用的開發(fā)。Vue作為js框架，實(shí)現(xiàn)頁面邏輯的控制和處理；Vue-router作為路由，實(shí)現(xiàn)單頁面應(yīng)用的頁面跳轉(zhuǎn)；Webpack作為預(yù)編譯和打包工具，將.vue文件預(yù)編譯為瀏覽器端可運(yùn)行的js文件，并對各模塊下的js進(jìn)行合并打包。可使用vue-cli腳手架工具，初始化項(xiàng)目2.Notejs安裝配置vue-cli、Webpack依賴notejs環(huán)境進(jìn)行安裝和啟動，需要先配置好nodeJs環(huán)境。1.ftp路徑：devoptsofts/no

2、dejs/node-v6.9.0-x64.msi；2.雙擊安裝文件進(jìn)行安裝；3.打開命令行工具，輸入node–version命令，出現(xiàn)版本號即為安裝成功。3.vue-cli使用1.安裝vue-cli在命令行中執(zhí)行：npminstall-gvue-cli2.執(zhí)行vueinitwebpackmy-vue命令初始化項(xiàng)目，my-vue為項(xiàng)目文件夾名稱1.進(jìn)入項(xiàng)目目錄下2.安裝依賴項(xiàng)：npminstall3.運(yùn)行項(xiàng)目：npmrundev4.修改文件打包后，html的引用路徑：5.打包項(xiàng)目：npmrunbuild生成后的項(xiàng)目目錄結(jié)構(gòu)

3、如下所示：1.WebStorm配置為了開發(fā)的便利性，使用WebStorm作為前端的開發(fā)工具，想要支持Vue的開發(fā)需要對開發(fā)工具做如下設(shè)置：1.ftp路徑：devoptsofts/webstorm/WebStorm-2016.3.2.exe；2.為了支持webpack自動編譯的功能，需要關(guān)閉WebStorm的“SafeWrite”模式。打開File>>Settings>>Appearance&Behavior>>SystemSetting3.為了支持.vue文件中的代碼提示，以及ES6的語法，需要修改相關(guān)的設(shè)置：打開Fil

4、e>>Settings>>Languages&Frameworks>>JavaScript打開File>>Settings>>Editor>>FileTypes1.配置完以上設(shè)置之后，即可導(dǎo)入項(xiàng)目進(jìn)行開發(fā)了。1.vue-router配置前端框架使用單頁面應(yīng)用的開發(fā)模式，需要依賴vue-router路由，實(shí)現(xiàn)頁面的跳轉(zhuǎn)。vue-cli腳手架工具生成的前端項(xiàng)目中，沒有vue-router的依賴，需要手動加載。1.點(diǎn)擊編輯器左下角的“Terminal”，打開命令行窗口2.輸入命令加載路由依賴庫：npmivue-router--

5、save注：--save命令會將依賴添加到package.json文件中的dependencies中，生產(chǎn)模式下使用，--save-dev命令會將依賴添加到package.json文件中的devDependencies中,只在開發(fā)模式下使用，webpack不會將該依賴打包。1.添加完依賴之后，即可使用vue-router來創(chuàng)建路由。在src文件中添加config/routers.js文件來配置路由地址。2.在main.js文件中，添加路由的配置。1.分模塊按需加載的配置：1.路由功能簡單使用示例：直接使用

6、link>標(biāo)簽，通過to屬性設(shè)置路由到的頁面在js中使編程式的導(dǎo)航路由：1.vue-resource配置Vue不提供后端資源請求的功能，需要依賴vue-resource模塊，實(shí)現(xiàn)后端接口的調(diào)用，使用前需要添加vue-resource依賴。1.在編輯器的“Terminal”窗口中，執(zhí)行加載依賴命令：npmivue-resource--save2.在main.js中添加vue-resource的依賴1.引入vue-resource后，可以基于全局的Vue對象使用http，也可以基于某個Vue實(shí)例使用http。2.簡單使用示例

7、：