?? 個人主頁歡迎訪問 ??
友情鏈接: 想要學(xué)習(xí)最簡單最基礎(chǔ)的Vue+Webpack等更多配置, 可以Fork該項目, 遇到問題可以直接new issue
大家好彻亲，我是蘇日儷格撼港，這篇文章可能會有一些遺漏的地方，當(dāng)初寫完沒有保存，結(jié)果好多后來寫的都沒存上重新又寫的，有問題的地方望讀者告知，謝謝负拟！
看到文章名字就大致清楚，本文是在vue腳手架下使用Element和less技術(shù)進(jìn)行開發(fā)的一個demo講解篮赢。在之前的Vue項目中的一些問題這篇文章中齿椅，我雖然不推薦用vue-cli，但是項目中很多時候不得不用vue-cli（ps:這并不是在打自己的臉哦）启泣，畢竟尤大大開發(fā)這東西太新鮮涣脚，沒有理由不用他；于是乎開始構(gòu)建一個新的項目寥茫，由于個人不喜歡安裝全局的東西遣蚀，畢竟每個項目的需求不同，所以安裝的框架以及構(gòu)建工具的版本也是不同的纱耻，而vue-cli官方的做法就是安裝全局的芭梯，我反其道而為之，結(jié)果遭到了一大波error的攻擊弄喘，接下來我等待的就是一下午的折磨...
還好vue的生態(tài)系統(tǒng)夠大玖喘，社區(qū)活躍度也很高，去了好多站點發(fā)了相關(guān)帖子包括尤大大的github也留下了我的腳印蘑志，最后找到了問題所在累奈。
安裝webpack
在看這個問題之前首先要保證電腦中存在node環(huán)境贬派，因為下面都需要在node環(huán)境下用npm包管理工具會很慢，所以下面可以選擇用cnpm淘寶鏡像
新建一個目錄澎媒，輸入dos命令npm init初始化項目
開始安裝本地webpack：npm install webpack webpack-cli -D搞乏，由于webpack 4+版本需要webpack-cli的支持，所以都得安裝戒努，之前的版本則不需要
安裝vue
npm install vue --save
下面可以選擇兩種方式安裝vue-cli：
本地安裝vue腳手架
npm install vue-cli --save
重點來了请敦，這里確實已經(jīng)安裝成功了，但因為是本地安裝而不是全局的储玫，所以在下面的步驟中會出現(xiàn)問題
至于什么問題接著往下看???
全局安裝vue腳手架
npm install vue-cli -g
喝杯茶冷靜一下~~~
重新創(chuàng)建這個基于webpack的項目：vue init webpack my-project
接下來依次出現(xiàn)了這一堆：
雖然是一路回車加yes下來的侍筛，不過我還是去google了一下：
- Project name my-project： -----項目名稱，直接回車缘缚，按照括號中默認(rèn)名字（注意這里的名字不能有大寫字母勾笆，如果有會報錯Sorry, name can no longer contain capital letters）敌蚜，阮一峰老師博客為什么文件名要小寫 桥滨，可以參考一下。
- Project description A Vue.js project： ----項目描述弛车，也可直接點擊回車齐媒，使用默認(rèn)名字
- Author yuanfei： ----作者，輸入你的大名
接下來會讓用戶選擇：- Runtime + Compiler: recommended for most users 運行加編譯纷跛，既然已經(jīng)說了推薦喻括，就選它了
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 僅運行時，已經(jīng)有推薦了就選擇第一個了- Install vue-router? (Y/n) 是否安裝vue-router贫奠，這是官方的路由唬血，大多數(shù)情況下都使用，這里就輸入“y”后回車即可唤崭。
- Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼拷恨，ESLint是個代碼風(fēng)格管理工具，是用來統(tǒng)一代碼風(fēng)格的谢肾，一般項目中都會使用腕侄。
接下來也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個ESLint預(yù)設(shè)，編寫vue項目時的代碼風(fēng)格芦疏，直接y回車- Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測試冕杠，我選擇安裝y回車
- Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測試 ，我選擇安裝y回車
以上引用https://blog.csdn.net/wulala_hei/article/details/80488674
但是ESLint 這個規(guī)范我并不建議酸茴，如果你的代碼縮進(jìn)是4個空格分预，那么就會報錯和一大堆警告，會很影響心情和開發(fā)效率薪捍；在這里我選擇安裝是想讓大家看到完整的目錄結(jié)構(gòu)
創(chuàng)建一個基于webpack的項目
vue init webpack 你的項目名
如果剛才是用本地安裝的vue腳手架笼痹，執(zhí)行完之后發(fā)現(xiàn)dos提示：vue不是內(nèi)部或是外部命令
為了更好的查看我們安裝vue的狀態(tài)魁淳，輸入vue --version，發(fā)現(xiàn)還是沒有
個人總結(jié)：原因在于本地安裝在node_modules里面了与倡，所以在外面調(diào)用不到vue界逛，所以就用不了vue的命令，在這個時候我選擇了強制安轉(zhuǎn)纺座，在node_modules/.bin/路徑下執(zhí)行了vue init try息拜，安裝好了皆大歡喜，結(jié)果出現(xiàn)了下面這個情況→_→：
項目確實已經(jīng)出來了净响，但是確是在node模塊下少欺，這個結(jié)構(gòu)就沒法繼續(xù)下去了...于是我發(fā)了帖子得到了大佬的指點，大家有興趣可以看一下有三種方法解決馋贤，我選擇了最優(yōu)質(zhì)的方案：在目標(biāo)目錄下的package.json中的scripts加一個"vue": "vue"赞别，到了這里想必大家也和我是一個想法，就是安裝上了vue只不過訪問不到配乓，只需要這樣就可以讓vue進(jìn)行訪問了仿滔，然后正常運行就可以了
運行項目
進(jìn)入你的項目目錄下：cd 你的項目名
運行項目：npm run dev / npm start
打開瀏覽器輸入localhost:8080就出來了
vue-cli構(gòu)建項目結(jié)構(gòu)
回歸項目結(jié)構(gòu)是這樣的：
.
|-- build // webpack構(gòu)建目錄
| |-- build.js // 生產(chǎn)環(huán)境構(gòu)建的相關(guān)代碼
| |-- check-version.js // 檢查node、npm等版本
| |-- utils.js // 構(gòu)建工具相關(guān)
| |-- vue-loader.conf.js // 生產(chǎn)環(huán)境讀取vue配置
| |-- webpack.base.conf.js // webpack基礎(chǔ)配置
| |-- webpack.dev.conf.js // webpack開發(fā)環(huán)境配置
| |-- webpack.prod.conf.js // webpack生產(chǎn)環(huán)境配置
|-- config // 項目開發(fā)環(huán)境配置信息
| |-- dev.env.js // 開發(fā)環(huán)境變量
| |-- index.js // 項目一些配置變量
| |-- prod.env.js // 生產(chǎn)環(huán)境變量
| |-- test.env.js // 測試環(huán)境變量
|-- node_modules // 依賴的node模塊包
|-- src // 源碼目錄(我們開發(fā)的代碼全在這里)
| |-- components // vue組件目錄
| |-- store // vuex的狀態(tài)管理(安裝vuex的有該項犹芹，用來管理所有組件的狀態(tài))
| |-- router // 路由目錄(配置整個程序的路由)
| |-- App.vue // 頁面入口文件也是我們的主組件(所有頁面的切換都是在這下面進(jìn)行的)
| |-- main.js // 初始化vue實例崎页，程序入口文件(加載各種組件和插件)
|-- static // 靜態(tài)資源目錄(圖片、字體等)
|-- test // 測試文件目錄
|-- .babelrc // babel的一些配置腰埂，即ES6語法編譯配置(將ES6語法編譯成ES5)
|-- .editorconfig // 編輯器的一些配置（包括編碼格式飒焦，縮進(jìn)風(fēng)格，換行格式）
|-- .eslintignore // 忽略掉build文件和config文件的語法檢查
|-- .eslintrc.js // eslint的配置文件(定義了代碼風(fēng)格)
|-- .gitignore // 上傳到git倉庫需要忽略的一些文件格式
|-- .postcssrc.js // 通過vue-loader來處理引入的css的輸出配置
|-- index.html // 入口頁面文件
|-- package.json // 項目配置文件(項目的一些配置信息)
|-- README.md // 項目的相關(guān)說明
.
參考：http://www.reibang.com/p/1155c20725d1
Element UI框架
項目已經(jīng)運行起來了屿笼，下面看一看Element是怎么玩的：
- 玩一個東西就要先安裝它的依賴包
npm install element-ui -S - 將element引入到vue項目中（樣式需單獨引入）：
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
接下來引入element的組件牺荠，Element官網(wǎng)有提到引入方式有兩種，一種是按需引入驴一，另一種是全部引入進(jìn)來休雌；為了不損害vue輕量框架的標(biāo)語，最好還是采用按需引入蛔趴，這樣才能達(dá)到減小項目體積的目的挑辆；這個時候需要借助 babel-plugin-component這個插件來完成按需加載。
首要任務(wù)還是安裝：npm install babel-plugin-component -D
其次將根目錄的.babelrc文件修改為：
{
"presets": [["es2015", { "modules": false }]],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
這時我的overlay的作用出來了孝情，給我報了個錯：
找不到es2015鱼蝉，這個時候安裝個：npm install babel-preset-es2015 -D，然后重新運行代碼并打開瀏覽器就好了
接下來我只引入了這幾個就夠了：
import { MessageBox, Message, Notification } from 'element-ui';
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;
完整組件列表以 components.json 為準(zhǔn)
接下來就按照我們以前玩bootstrap的玩法來玩這個就可以了箫荡，很簡單都是封裝好的一些內(nèi)置的標(biāo)簽和class魁亦，拿過來用就行了，項目源碼我已經(jīng)傳到了我的GitHub上了羔挡，有需要的小伙伴可以自行clone
有的小伙伴包括我都有一個疑問洁奈，Element是針對Vue進(jìn)行開發(fā)的间唉，使我們在Vue項目中開發(fā)很爽，那能不能在普通html里面使用它呢利术，答案是肯定的呈野；我?guī)е@些疑問研究了許久，最后我把它上傳到了我的素材網(wǎng)上印叁，有需要的小伙伴也可以到這里下載哦
Less
接下來我們使用less在組件中編寫css被冒，用了webpack自然就要安裝：
npm i less less-loader -D
安裝完了很簡單了，一步搞定轮蜕，在你需要的組件中的style里昨悼，加上lang="less"就可以了，有需求要給項目或產(chǎn)品換版的小伙伴可以大顯身手了
另外這里只講vue-cli下使用less跃洛，所以不是使用的腳手架的朋友請移步這里
好了率触，到這里我們的項目就完成了：
該項目已經(jīng)上傳到個人的GitHub上，預(yù)覽：https://yufy1314.github.io/vue-cli-demo/
本文的所有內(nèi)容均是一字一句敲上去的汇竭，希望大家閱讀完本文可以有所收獲葱蝗，因為能力有限，掌握的知識也是不夠全面韩玩，歡迎大家提出來一起分享垒玲！謝謝O(∩_∩)O~
歡迎訪問我的GitHub，喜歡的可以star找颓，項目隨意fork，支持轉(zhuǎn)載但要下標(biāo)注叮贩；
歡迎光臨個人主頁
等一下( ?? .? ?? )击狮，我還有最后一句話：
我愛你，
又很遺憾沒人能證明益老，
可這份愛已經(jīng)如鯨向海彪蓬，
如鳥投林，
無可避免捺萌，
退無可退了档冬，
再見...
