Vue-cli

 

1、腳手架（vue-cli）

　　（一）什麼是腳手架

　　　　概念：是一種用於快速開發Vue項目的系統架構

　　　　優勢：可以幫助我們快速的開發項目

　　　　缺點：因爲腳手架適用於各類項目的開發，而不是單獨的針對某一項目單獨研發的，會出現代碼冗餘

　　（二）腳手架的使用：

　　　　一、安裝腳手架 vue-cli

　　　　　　全局安裝打開cmd運行：cnpm install -g @vue/cli

　　　　二、查看當前版本號：

　　　　　　vue -V

　　　　三、建立項目：

　　　　　　根目錄下打開cmd運行：vue create objectname項目名稱（名稱不能有大寫）

　　　　　　

 

　　　　四、安裝：

　　　　　　

　　　　　　1）是否手動安裝：

　　　　　　　　a、default默認安裝：

　　　　　　　　b、manually手動安裝：

　　　　　　　　

 

　　　　　　　　　注：空格鍵控制選中

 　　　　　　2）是否在路由當中給予默認的history（hash哈希模式）模式

　　　　　　　　

　　　　　　

　　　　　　3）是否將配置單獨放到一個文件，仍是放到package.json文件裏

　　　　　　　　

 

 　　　　　　4）是否將這次設置保存並設置保存的名稱

　　　　　　　　

　　　　　　基本配置完成

　　　　　　　　

 

　　　　五、cd objectname

　　　　　　cd myapp：進入項目當中

　　　　六、serve/build

　　　　　　npm run serve：運行腳本服務

　　　　　　npm run build：打包文件

　　　　注：以vue結尾的都是組件

　　　　七、<style scoped><style>

　　　　　　添加scoped屬性，樣式只會在該組件內起效果

　　（三）vue項目的配置

　　　　例如：默認的端口號，服務地址，是否自動在瀏覽器中打開，服務器中間層，打包默認地址等

　　　　在項目的根目錄當中建立一個名字爲vue.config.js

        module.exports = {
            devServer:{
                // 設置默認端口
                port:"8090",
                // 域名，主體
                host:"127.0.0.1",
                // 自動打開瀏覽器
                open:true
            }
        }

 

　　　　注：當vue.config.js文件發生改變時，必定要重啓項目，不然不起效果