摘要:當(dāng)使用只有入口的字符串格式時(shí),模板會(huì)被推導(dǎo)為并且如果找不到的話,就回退到。配置這里的選項(xiàng)會(huì)傳遞給這里的選項(xiàng)會(huì)傳遞給警告錯(cuò)誤其他可使用和對(duì)單個(gè)文件快速開(kāi)發(fā)圖形化界面創(chuàng)建管理項(xiàng)目
近日,Vue作者尤雨溪發(fā)布了正式的vue cli 3.0,基于webpack4,趕緊試一下.
文檔地址vue-cli
Vue CLI 是一個(gè)基于 Vue.js 進(jìn)行快速開(kāi)發(fā)的完整系統(tǒng)
使用npm install -g @vue/cli npm create new-cli
然后就是配置,可默認(rèn)(babel,eslint),自定義
自定義有 babel ts pwa vue-router vuex css預(yù)處理 以及Linter/Formatter,unit testing e2e testing
選了router 會(huì)再次選是否用history模式
在這里選了css預(yù)處理又會(huì)讓選 less scss stylus
eslint 又有幾項(xiàng)
只防止出錯(cuò)
airbnb 配置
標(biāo)準(zhǔn)配置
eslint +prettier
還有一項(xiàng)是把配置文件如babel,postCss eslint 放多帶帶文件,還是放package.json里,當(dāng)然多帶帶了
最后有個(gè)保存配置,以后用
然后就是安裝依賴(lài)
目錄如下
沒(méi)有cli2版本的build和config,多個(gè)babel.config.js
官網(wǎng)介紹是可以新建個(gè)vue.config.js進(jìn)行相關(guān)webpack配置,比如
// vue.config.js module.exports = { configureWebpack: { plugins: [ new MyAwesomeWebpackPlugin() ] }, //loader chainWebpack: config => { config.module .rule("vue") .use("vue-loader") .loader("vue-loader") .tap(options => { // 修改它的選項(xiàng)...loader return options }) }, //生產(chǎn)環(huán)境關(guān)閉map productionSourceMap:false, //基本URL baseUrl: process.env.NODE_ENV === "production" ? "http://www.baidu.com" : "https://www.google.com", outputDir:"dist", //build 目錄 assetsDir:"",//asset目錄 indexPath:"index.html",//指定index.html 路徑 filenameHashing:true,//文件名帶hash // multi-page模式,每個(gè)“page”應(yīng)該有一個(gè)對(duì)應(yīng)的 JavaScript 入口文件 pages: { index: { // page 的入口 entry: "src/index/main.js", // 模板來(lái)源 template: "public/index.html", // 在 dist/index.html 的輸出 filename: "index.html", // 當(dāng)使用 title 選項(xiàng)時(shí), // template 中的 title 標(biāo)簽需要是其他<%= htmlWebpackPlugin.options.title %> title: "Index Page", // 在這個(gè)頁(yè)面中包含的塊,默認(rèn)情況下會(huì)包含 // 提取出來(lái)的通用 chunk 和 vendor chunk。 chunks: ["chunk-vendors", "chunk-common", "index"] }, // 當(dāng)使用只有入口的字符串格式時(shí), // 模板會(huì)被推導(dǎo)為 `public/subpage.html` // 并且如果找不到的話,就回退到 `public/index.html`。 // 輸出文件名會(huì)被推導(dǎo)為 `subpage.html`。 subpage: "src/subpage/main.js" }, //css配置 css: { sourceMap:false,//css source map loaderOptions: { css: { // 這里的選項(xiàng)會(huì)傳遞給 css-loader }, postcss: { // 這里的選項(xiàng)會(huì)傳遞給 postcss-loader } } }, //dev server devServer: { host:127.0.0.1 port:8000, proxy: "http://localhost:4000", overlay: { warnings: true,//警告 errors: true//錯(cuò)誤 } } }
可使用vue serve和vue build 對(duì)單個(gè)vue文件快速開(kāi)發(fā)
vue ui 圖形化界面創(chuàng)建管理項(xiàng)目
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/96920.html
摘要:慢慢地,關(guān)于的原創(chuàng)學(xué)習(xí)文章已經(jīng)寫(xiě)了多篇了會(huì)一直放出來(lái),目前篇,因此做一個(gè)合集,獻(xiàn)給那些對(duì)新版本腳手架使用和背后設(shè)計(jì)感興趣的同學(xué),都是一步一步去看源碼,也給官方提了幾次,合進(jìn)去了幾個(gè)原創(chuàng)不易,歡迎大家互相轉(zhuǎn)發(fā),期望大家一起快速過(guò)度到版本目錄 慢慢地,關(guān)于 Vue CLI 3 的原創(chuàng)學(xué)習(xí)文章已經(jīng)寫(xiě)了 20 多篇了(會(huì)一直放出來(lái),目前 23 篇), 因此做一個(gè)合集,獻(xiàn)給那些對(duì)新版本腳手架使用...
摘要:前言都到了,所以是時(shí)候玩轉(zhuǎn)一下的新特性了。安裝的包名稱(chēng)由改成了。方法一原因的配置改變了,導(dǎo)致正確的不能用。打開(kāi)終端,切換到根路徑文件里面修改為方法二是默認(rèn)路徑修改了路徑會(huì)出現(xiàn)錯(cuò)誤。按上面的方法修改完,再全局卸載果然就成功了。 showImg(https://segmentfault.com/img/remote/1460000016423946); 前言 vue-cli 都到 3.0....
電腦之前安裝的vue-cli版本太低,現(xiàn)在要改換成最新版本,那么就需要先將舊版本卸載,安裝新版本。vue-cli:vue3.0之前版本使用此名稱(chēng) @vue/cli:vue3.0之后版本包括3.0版本使用此名稱(chēng) 以下列舉npm和yarn指令的方式: 卸載指令: //卸載3.0之前的版本 npmuninstall-gvue-cli yarnglobalremovevue-cli ...
摘要:可以使用或來(lái)安裝我用來(lái)重新嘗試一次對(duì)速度表示不理想的可以嘗試淘寶的不要過(guò)度依賴(lài)中可以寫(xiě)成放哪都行,可以寫(xiě)成可以寫(xiě)成看到這個(gè)畫(huà)面,安裝完成了。 初步搭建腳手架 Tips 任何不錯(cuò)的開(kāi)源項(xiàng)目都有 project-cli 腳手架、我們用它生成往往能快速配制出最佳的、理想的腳手架 我通常使用 cli 生成項(xiàng)目骨架再在之基礎(chǔ)上進(jìn)行個(gè)人修改。 什么是 CLI 命令行界面(英語(yǔ):command-li...
摘要:可以使用或來(lái)安裝我用來(lái)重新嘗試一次對(duì)速度表示不理想的可以嘗試淘寶的不要過(guò)度依賴(lài)中可以寫(xiě)成放哪都行,可以寫(xiě)成可以寫(xiě)成看到這個(gè)畫(huà)面,安裝完成了。 初步搭建腳手架 Tips 任何不錯(cuò)的開(kāi)源項(xiàng)目都有 project-cli 腳手架、我們用它生成往往能快速配制出最佳的、理想的腳手架 我通常使用 cli 生成項(xiàng)目骨架再在之基礎(chǔ)上進(jìn)行個(gè)人修改。 什么是 CLI 命令行界面(英語(yǔ):command-li...
摘要:前言通過(guò)搭建交互式的項(xiàng)目腳手架。通過(guò)快速開(kāi)始零配置原型開(kāi)發(fā)。與此同時(shí),它也為每個(gè)工具提供了調(diào)整配置的靈活性,無(wú)需。例如,如果你的應(yīng)用被部署在,則設(shè)置為。我們將在下篇文章里詳細(xì)講述的使用官方文檔 前言 通過(guò) @vue/cli 搭建交互式的項(xiàng)目腳手架。通過(guò) @vue/cli + @vue/cli-service-global 快速開(kāi)始零配置原型開(kāi)發(fā)。一個(gè)運(yùn)行時(shí)依賴(lài) (@vue/cli-se...
閱讀 2520·2023-04-25 17:37
閱讀 1203·2021-11-24 10:29
閱讀 3709·2021-09-09 11:57
閱讀 704·2021-08-10 09:41
閱讀 2256·2019-08-30 15:55
閱讀 2822·2019-08-30 15:54
閱讀 1951·2019-08-30 15:53
閱讀 906·2019-08-30 15:43