成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue-cli 3.0 使用

PumpkinDylan / 2467人閱讀

摘要：安裝如果想要使用首先需要全局安裝，前提要求版本必須是及以上默認(rèn)會(huì)覆蓋，如果想要在使用版本的時(shí)候同時(shí)使用版本，那么執(zhí)行以下命令該命令是安裝一個(gè)橋接工具，版本的命令依然會(huì)被保留創(chuàng)建也可以通過(guò)命令打開(kāi)一個(gè)圖形化界面進(jìn)行配置配置在版本中會(huì)

安裝

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

npm install -g @vue/cli

vue cli 3.0默認(rèn)會(huì)覆蓋vue cli 2.0 ，如果想要在使用3.0版本的時(shí)候同時(shí)使用2.0版本，那么執(zhí)行以下命令

npm install -g @vue/cli-init

該命令是安裝一個(gè)橋接工具，2.0版本的命令依然會(huì)被保留

vue init webpack test-2
創(chuàng)建 
vue create hello-cli3

也可以通過(guò)命令打開(kāi)一個(gè)圖形化界面進(jìn)行配置

vue ui

配置

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

第一個(gè)選項(xiàng)default是生成一個(gè)默認(rèn)的簡(jiǎn)易配置的模板，可以類比為之前 2.0 版本中的webpack-simple模板，如果正式開(kāi)發(fā)的話，建議選擇Manually select features自己進(jìn)行配置

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

接下來(lái)會(huì)讓我們選擇要使用的預(yù)編譯工具，選擇一個(gè)自己常用的

然后會(huì)讓我們選擇代碼格式化檢測(cè)工具

這里提供兩個(gè)選項(xiàng)，保存的時(shí)候檢測(cè)還是在commit和fix的時(shí)候檢測(cè)，可以根據(jù)項(xiàng)目需要進(jìn)行選擇

這里如果不選擇前面的 Linter/ Formatter就不會(huì)出現(xiàn)該選項(xiàng)，也可以在package中刪除掉相關(guān)代碼

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

然后會(huì)詢問(wèn)我們要將babel 等這些文件放置到 一個(gè)獨(dú)立文件 / package.json，推薦放置到一個(gè)獨(dú)立文件

然后會(huì)讓我們選擇是否保存剛才的配置，第一項(xiàng)表示保存，保存之后下次再創(chuàng)建時(shí)就有我們之前的配置了，不需要再配置一遍，然后可以為該配置添加一個(gè)描述

在我們配置了這兩項(xiàng)之后，再次使用vue create xxx 會(huì)出現(xiàn)我們之前的配置讓我們可以直接復(fù)用之前的配置

如果后期我們想要?jiǎng)h除之前配置的模板，可以找到用戶下的.vuerc的json文件，找到presets項(xiàng)，刪除掉對(duì)應(yīng)模板名稱及配置即可，也可以修改對(duì)應(yīng)配置來(lái)更改模板

啟動(dòng)

在VUE CLI 3 中默認(rèn)的下載使用yarn，所以命令使用yarn

yarn serve
打包 
yarn build

官方文檔地址

配置vue.config.js

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

配置別名 
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": ""
                }
            }
        },
    }
}
處理首頁(yè)白屏

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

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

更加詳細(xì)的關(guān)于vue.config.js文件的配置，可以參考這篇文章

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/101736.html

相關(guān)文章

  • vue-cli2.0轉(zhuǎn)3.0之項(xiàng)目搭建

    摘要：因?yàn)轫?xiàng)目技術(shù)架構(gòu)需要，要用進(jìn)行搭建，所以簡(jiǎn)單的分享下如何優(yōu)雅的開(kāi)始。第三步創(chuàng)建項(xiàng)目相對(duì)，創(chuàng)建就不是之前一大堆了。直接，是項(xiàng)目名字。但是個(gè)人建議，進(jìn)行多選，根據(jù)自己需要進(jìn)行選擇。根據(jù)提示，運(yùn)行一把一下，跑起來(lái)的感覺(jué)很棒。 因?yàn)轫?xiàng)目技術(shù)架構(gòu)需要，要用vue-cli 3.0進(jìn)行搭建，所以簡(jiǎn)單的分享下3.0如何優(yōu)雅的開(kāi)始。下面做一下簡(jiǎn)單的介紹，希望可以幫到有需要的朋友。 vue-cli 3.0...

    Zhuxy 評(píng)論0 收藏0

  • 記vue-cli@3.0和之前版本的差異

    摘要：記使用方式和之前版本的差異的使用下載和安裝項(xiàng)目生成的目錄結(jié)構(gòu)以上，目前版本的使用下載和安裝項(xiàng)目生成的目錄結(jié)構(gòu)新的目錄結(jié)構(gòu)，隱藏了配置文件，封裝了細(xì)節(jié)對(duì)比個(gè)區(qū)別區(qū)別下載包的包命變化。貌似是之前的版本有點(diǎn)問(wèn)題 記[email protected]使用方式和之前版本的差異 @2.9.3的使用 1.下載vue-cli和安裝項(xiàng)目 cnpm i -g vue-cli#2.9.3 vue init webpa...

    wow_worktile 評(píng)論0 收藏0

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

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

    KitorinZero 評(píng)論0 收藏0

  • vue-cli 3.0

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

    April 評(píng)論0 收藏0

  • vue-cli 3.0

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

    mengera88 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<