vue-cli 3.0

(第一章)學習vue-cli 3.0腳手架構建vue項目

vue學習鞏固及遇到的問題

首先此次使用的vue腳手架爲vue-cli 3.0,它跟以前的腳手架改變了不少,這裏我也沒去細細的研究,也只懂得了最基本的用法,參考:html

vue-cli 3 地址https://cli.vuejs.org/zh/guide/vue

  • 其中值得注意幾點:node

1.vue-cli 3 腳手架須要node.js 版本8.9 或更高版本,由於以前項目用的vue1.0,因此node版本用的比較低webpack

(6.11.3),因此想同時管理多個node版本,因此用到了gnvm一個工具,
    官網也有推薦nvm 或 nvm-windows(本人沒用).

2.記錄下gnvm一些簡單經常使用的命令連接描述web

config       配置 .gnvmrc
        use          使用某個本地已存在的 Node.js 版本
        ls           輸出 [local] [remote] Node.js 版本
        install      下載/安裝任意已知版本的 Node.js
        uninstall    刪除任意本地已存在的 Node.js
        update       下載 Node.js latest 版本並更新到 .gnvmrc 裏面
        npm          NPM 下載/安裝/刪除 管理
        session      臨時設定本地某個已存在的 Node.js 爲 全局 Node.js
        search       查詢而且輸出符合查詢條件的 Node.js 版本詳細信息的列表
        node-version 輸出 [global] [latest] Node.js 版本
        reg          設定 .gnvmrc 屬性值 [noderoot] 爲 環境變量 [NODE_HOME],並加入到 Path 中
        version      查看 gnvm 版本
        安裝多個node.js: gnvm install latest 1.0.0-x86 1.0.0-x64 5.0.0
        卸載本地任意 Node.js 版本: gnvm uninstall latest 1.0.0-x86 1.0.0-x64 5.0.0
        安裝node.js 對應的npm版本:  一、gnvm有命令(能夠去看文檔)  二、npm install -g npm@5.0.1

3.vue-cli 3 靈活 配置都做爲插件 項目構建好後也能夠隨時加插件,插件文檔連接描述vue-cli

4.想修改啓動時打開瀏覽器和修改端口等 只需在package.json scripts對象中修改:npm

具體的命令:
            用法:vue-cli-service serve [options] [entry]
            --open    在服務器啓動時打開瀏覽器
            --copy    在服務器啓動時將 URL 複製到剪切版
            --mode    指定環境模式 (默認值:development)
            --host    指定 host (默認值:0.0.0.0)
            --port    指定 port (默認值:8080)
            --https   使用 https (默認值:false)

圖片描述

5.動態圖片或者說靜態資源放在public文件夾下。不會通過webpack打包。
6.配置環境變量參考:https://segmentfault.com/a/11...
7.打包後dist項目的啓動發生了變化,以前能夠直接打開index.html,如今須要json

  • npm install -g serve # -s 參數的意思是將其架設在 Single-Page Application 模式下 # 這個模式會處理即將提到的路由問題 serve -s dist
相關文章
相關標籤/搜索