国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue-cli 3.0 使用

PumpkinDylan / 2464人閱讀

摘要：安裝如果想要使用首先需要全局安裝，前提要求版本必須是及以上默認會覆蓋，如果想要在使用版本的時候同時使用版本，那么執行以下命令該命令是安裝一個橋接工具，版本的命令依然會被保留創建也可以通過命令打開一個圖形化界面進行配置配置在版本中會

安裝

如果想要使用vue cli 3.0 首先需要全局安裝，前提要求Node.js版本必須是8.0及以上

npm install -g @vue/cli

vue cli 3.0默認會覆蓋vue cli 2.0 ，如果想要在使用3.0版本的時候同時使用2.0版本，那么執行以下命令

npm install -g @vue/cli-init

該命令是安裝一個橋接工具，2.0版本的命令依然會被保留

vue init webpack test-2
創建 
vue create hello-cli3

也可以通過命令打開一個圖形化界面進行配置

vue ui

配置

在3.0版本中會讓我們自行選擇需要的配置

第一個選項default是生成一個默認的簡易配置的模板，可以類比為之前 2.0 版本中的webpack-simple模板，如果正式開發的話，建議選擇Manually select features自己進行配置

在選擇Manually select features后，會讓我們選擇模板中進行哪些配置，新添加了添加對TS和PWA的支持，這里可以根據項目情況自己選擇需要使用那些，空格選中/取消，A鍵全選

接下來會讓我們選擇要使用的預編譯工具，選擇一個自己常用的

然后會讓我們選擇代碼格式化檢測工具

這里提供兩個選項，保存的時候檢測還是在commit和fix的時候檢測，可以根據項目需要進行選擇

這里如果不選擇前面的 Linter/ Formatter就不會出現該選項，也可以在package中刪除掉相關代碼

"eslintConfig": {
    ...
    "extends": [
      "plugin:vue/essential",
      "@vue/prettier" //刪除掉這里
    ],
    ...
  },

然后會詢問我們要將babel 等這些文件放置到 一個獨立文件 / package.json，推薦放置到一個獨立文件

然后會讓我們選擇是否保存剛才的配置，第一項表示保存，保存之后下次再創建時就有我們之前的配置了，不需要再配置一遍，然后可以為該配置添加一個描述

在我們配置了這兩項之后，再次使用vue create xxx 會出現我們之前的配置讓我們可以直接復用之前的配置

如果后期我們想要刪除之前配置的模板，可以找到用戶下的.vuerc的json文件，找到presets項，刪除掉對應模板名稱及配置即可，也可以修改對應配置來更改模板

啟動

在VUE CLI 3 中默認的下載使用yarn，所以命令使用yarn

yarn serve
打包 
yarn build

官方文檔地址

配置vue.config.js

在vue cli 3.0中取消了config配置文件，如果我們想要額外配置，需要在根目錄新建一個vue.config.js文件，在該文件中進行配置

配置別名 
const path=require("path");

function resolve(dir){
    return path.join(__dirname,dir)
}

module.exports={
    chainWebpack:config=>{
        config.resolve.alias
        .set("views",resolve("src/views"))
    }
}
配置代理

依然是采用http-proxy-middleware 做的跨域處理

module.export={
    devServer:{
        host:"localhost",
        port:8080,
        proxy: {
            "/api": {
                target: "https://api.douban.com/",
                changeOrigin: true,
                pathRewrite: {
                    "^/api": ""
                }
            }
        },
    }
}
處理首頁白屏

在 3.0 中依然存在打包后首頁白屏的問題，解決方案就是配置baseUrl

module.exports = {
    baseUrl:"./"
}

更加詳細的關于vue.config.js文件的配置，可以參考這篇文章

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

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

相關文章

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

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

    Zhuxy 評論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 評論0 收藏0

  • 使用VUE搭建后臺管理系統(vue-cli更新至3.0)

    摘要：最近還沒來得及更新文章，就發現已經更新到版本了。安裝成功啟動的指令和相比有了些修改不過我們現在可以通過圖形化界面進行啟動啟動之后照例訪問即可訪問新建的項目 最近還沒來得及更新文章，就發現vue-cli已經更新到3.0版本了。 //想了想還是用升級吧，反正最終都逃不掉，不如在這個項目上實驗一下3.0的威力(并不會)。 升級vue-cli npm install -g vue@cli v...

    KitorinZero 評論0 收藏0

  • vue-cli 3.0

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

    April 評論0 收藏0

  • vue-cli 3.0

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

    mengera88 評論0 收藏0

發表評論

0條評論

PumpkinDylan

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<