vue+vue-router+webpack框架搭建

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)行合并打包?？墒褂胿ue-cli腳手架工具，初始化項(xiàng)目2. Notejs安裝配置vue-cli、Webpack依賴notejs環(huán)境進(jìn)行安裝和啟動(dòng)，需要先配置好nodeJs環(huán)境。1. ftp路徑：devoptsofts/nodejs/node-v6.9.0-x64.msi；2. 雙擊安裝文件

2、進(jìn)行安裝；3. 打開命令行工具，輸入node version命令，出現(xiàn)版本號即為安裝成功。3. vue-cli使用1. 安裝vue-cli在命令行中執(zhí)行：npm install -g vue-cli2. 執(zhí)行vue init webpack my-vue命令初始化項(xiàng)目，my-vue為項(xiàng)目文件夾名稱3. 進(jìn)入項(xiàng)目目錄下4. 安裝依賴項(xiàng)：npm install5. 運(yùn)行項(xiàng)目：npm run dev6. 修改文件打包后，html的引用路徑：7. 打包項(xiàng)目：npm run build生成后的項(xiàng)目目錄結(jié)構(gòu)如下所示：4. WebStorm配置為了開發(fā)的便利性，使用WebStorm作為前端的開發(fā)工具，想要支

3、持Vue的開發(fā)需要對開發(fā)工具做如下設(shè)置：1. ftp路徑：devoptsofts/webstorm/WebStorm-2016.3.2.exe；2. 為了支持webpack自動(dòng)編譯的功能，需要關(guān)閉WebStorm的“Safe Write”模式。打開File >> Settings >> Appearance&Behavior >> System Setting3. 為了支持.vue文件中的代碼提示，以及ES6的語法，需要修改相關(guān)的設(shè)置：打開File >> Settings >> Languages&Frameworks

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

5、n文件中的dependencies中，生產(chǎn)模式下使用，-save-dev命令會(huì)將依賴添加到package.json文件中的devDependencies中,只在開發(fā)模式下使用，webpack不會(huì)將該依賴打包。3. 添加完依賴之后，即可使用vue-router來創(chuàng)建路由。在src文件中添加config/routers.js文件來配置路由地址。4. 在main.js文件中，添加路由的配置。5. 分模塊按需加載的配置：6. 路由功能簡單使用示例：直接使用<router-link>標(biāo)簽，通過to屬性設(shè)置路由到的頁面在js中使編程式的導(dǎo)航路由：6. vue-resource配置Vue不提供后端資源請求的功能，需要依賴vue-resource模塊，實(shí)現(xiàn)后端接口的調(diào)用，使用前需要添加vue-resource依賴。1. 在編輯器的“Terminal”窗口中，執(zhí)行加載依賴命令：npm i vue-resource -save2. 在main.js