vue-cli 3.0

April 發布于2019-08-23 11:36 / 2599人閱讀

摘要：配置環境變量參考打包后項目的啟動發生了變化，之前可以直接打開，現在需要參數的意思是將其架設在模式下這個模式會處理即將提到的路由問題

(第一章)學習vue-cli 3.0腳手架構建vue項目 vue學習鞏固及遇到的問題

首先這次使用的vue腳手架為vue-cli 3.0，它跟之前的腳手架改變了很多，這里我也沒去細細的研究，也只懂得了最基本的用法，參考:

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

其中值得注意幾點：

1.vue-cli 3 腳手架需要node.js 版本8.9 或更高版本,因為之前項目用的vue1.0，所以node版本用的比較低

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

2.記錄下gnvm一些簡單常用的命令鏈接描述：

        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版本：  1、gnvm有命令(可以去看文檔)  2、npm install -g npm@5.0.1

3.vue-cli 3 靈活配置都作為插件項目構建好后也可以隨時加插件，插件文檔鏈接描述。

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

        具體的命令：
            用法：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，現在需要

npm install -g serve
# -s 參數的意思是將其架設在 Single-Page Application 模式下
# 這個模式會處理即將提到的路由問題
serve -s dist

GPU云服務器云服務器 vue-cli vue-cli3 gradle-3.0 jsf 3.0

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97193.html

vue-cli2.0轉3.0之項目搭建

摘要：因為項目技術架構需要，要用進行搭建，所以簡單的分享下如何優雅的開始。第三步創建項目相對，創建就不是之前一大堆了。直接，是項目名字。但是個人建議，進行多選，根據自己需要進行選擇。根據提示，運行一把一下，跑起來的感覺很棒。因為項目技術架構需要，要用vue-cli 3.0進行搭建，所以簡單的分享下3.0如何優雅的開始。下面做一下簡單的介紹，希望可以幫到有需要的朋友。 vue-cli 3.0...

Zhuxy 2019-08-23 13:59 評論0 收藏0
記vue-cli@3.0和之前版本的差異

摘要：記使用方式和之前版本的差異的使用下載和安裝項目生成的目錄結構以上，目前版本的使用下載和安裝項目生成的目錄結構新的目錄結構，隱藏了配置文件，封裝了細節對比個區別區別下載包的包命變化。貌似是之前的版本有點問題記vue-cli@3.0使用方式和之前版本的差異 @2.9.3的使用 1.下載vue-cli和安裝項目 cnpm i -g vue-cli#2.9.3 vue init webpa...

wow_worktile 2019-08-22 18:15 評論0 收藏0
vue-cli 3.0 源碼分析

摘要：寫在前面其實最開始不是特意來研究的源碼，只是想了解下的命令，如果想要了解命令的話，那么繞不開寫的。通過分析發現與相比，變化太大了，通過引入插件系統，可以讓開發者利用其暴露的對項目進行擴展。 showImg(https://segmentfault.com/img/bVboijb?w=1600&h=1094); 寫在前面其實最開始不是特意來研究 vue-cli 的源碼，只是想了解下 n...

yiliang 2019-08-23 15:11 評論0 收藏0
vue-cli 3.0

摘要：配置環境變量參考打包后項目的啟動發生了變化，之前可以直接打開，現在需要參數的意思是將其架設在模式下這個模式會處理即將提到的路由問題 (第一章)學習vue-cli 3.0腳手架構建vue項目 vue學習鞏固及遇到的問題首先這次使用的vue腳手架為vue-cli 3.0，它跟之前的腳手架改變了很多，這里我也沒去細細的研究，也只懂得了最基本的用法，參考: vue-cli 3 地址：http...

mengera88 2019-06-26 17:48 評論0 收藏0