資訊專欄INFORMATION COLUMN
摘要：前言從開始開發(fā)一個(gè)的項(xiàng)目。下載首先需要下載一個(gè)命令行工具，話說我是電腦管家里面直接下載的，也可以點(diǎn)這里下載如果有的話就不需要了，自帶的命令行也是可以的。使用命令行然后新建個(gè)文件夾放你的項(xiàng)目，進(jìn)入文件夾，右鍵打開命令行工具。
前言
從 0 開始開發(fā)一個(gè) vue 的 SPA 項(xiàng)目。
如果你還沒有學(xué)習(xí)過 vue，請(qǐng)先按照 官網(wǎng) 或者 社區(qū) 的教程做一遍。
像這樣，做幾個(gè)例子，不然的話看這篇文章的意義不大。
這篇文章比較適合已經(jīng)跟著官網(wǎng)的例子做了一遍的朋友們看。技術(shù)棧
vue2 + vuex + vue-router + mint-ui + zepto + es6 + less
另外參考了小伙伴提供 vue項(xiàng)目例子，大家也可以去看一下。
如果你已經(jīng)跟著教程做一遍了，那么接下來可以來做項(xiàng)目了
以前我只會(huì)寫點(diǎn)jquery ，會(huì)一點(diǎn)切圖，對(duì) vue 并沒有怎么了解。
雖然說 jquery 已經(jīng)很方便開發(fā)了，操作 dom 非常的方便，然而 vue 不用操作 dom 讓我覺得原來可以這么簡(jiǎn)單。
大家是不是還經(jīng)歷過這樣的項(xiàng)目結(jié)構(gòu)呢？
一直以來我覺得這樣子就可以了，想要什么就去插件網(wǎng)上下載就好了，比如 jquery，jquery.datepicker 等等。
這完全沒有什么問題，在我還只會(huì)切切圖的時(shí)候我就是這樣的項(xiàng)目結(jié)構(gòu)。
然而現(xiàn)在需要搭建一個(gè)復(fù)雜一點(diǎn)的環(huán)境，這會(huì)幫助我們做一些 合并壓縮，熱更新，自動(dòng)化等等一些麻煩事，方便我們的開發(fā)。
我們不再推薦下載 vue.js 到 js 文件夾，然后 html 里面引入使用。
然而寫這些配置是相當(dāng)麻煩的一件事，這里 vue-cli 幫助我們很好的解決了這個(gè)問題。
它能自動(dòng)幫助我們生成一些配置和基礎(chǔ)項(xiàng)目。
它生成的項(xiàng)目結(jié)構(gòu)是這樣子的。
(～￣▽￣)～
不得不說真是方便呢，如果對(duì)前端工程化一點(diǎn)基礎(chǔ)的沒有，是不是瞬間懵逼呢？ (????)??
是的，剛開始我也覺得這個(gè)很奇怪，為什么要弄的這么復(fù)雜，難道以前那樣子不好嗎？<(￣ˇ￣)/
我以前的話基本上是寫個(gè)模板，然后扔給后端，讓后端去使用這個(gè)模板，現(xiàn)在前后端分離了，自然而然前端就需要一個(gè)項(xiàng)目，當(dāng)然不能像之前那么簡(jiǎn)單啦，以前那樣的目錄只是方便后端使用而已。(○′?д?)?
壓縮編譯這些東西都得前端來解決，不能再像之前那樣子了。
那么，跟著下面的步驟一步步搭建好環(huán)境吧。
1、下載 Git
首先需要下載一個(gè)命令行工具，話說我是QQ電腦管家里面直接下載的，也可以點(diǎn)這里下載
如果有的話就不需要了，win10 自帶的命令行也是可以的。
2、下載 node
然后下載一個(gè)node。
3、使用命令行
然后新建個(gè)文件夾放你的項(xiàng)目，進(jìn)入文件夾，右鍵打開命令行工具。
4、使用淘寶鏡像資源 cnpm
輸入下面這個(gè)東西，安裝淘寶鏡像。
npm install -g cnpm --registry=https://registry.npm.taobao.org
這個(gè)比 npm 好用。
輸入一下指令看是否安裝完成。
如果安裝失敗請(qǐng)嘗試清一下緩存再安裝！
npm cache clean
5、安裝 webpack vue-cli
cnpm install -g vue-cli cnpm install -g webpack
輸入一下 -v ，測(cè)試是否安裝成功
6、生成項(xiàng)目
只要輸入這三個(gè)東西之后一直 n 回車就好了，至于下面那堆是什么暫時(shí)就不管了。(⊙v⊙)
第一遍如果等待時(shí)間太長(zhǎng) 直接 ctrl + c 跳出就好了。
到這里項(xiàng)目已經(jīng)生成完畢了，你可以在目錄下面看到你生成的項(xiàng)目了。
7、啟動(dòng)項(xiàng)目
然后按照提示安裝一下以來，我們就可以看到頁面了。
cd menu cnpm install && cnpm run dev
恭喜恭喜，我們已經(jīng)成功的搭建了一個(gè)項(xiàng)目了，接下來我們需要一款編輯器，如果你使用其他編輯器也是可以的。
8、下載編輯器 vscode
再裝一下 vscode 里面的一些插件
安裝了記得開啟 主題 和 文件圖標(biāo)主題。
項(xiàng)目結(jié)構(gòu)到這里我們就搭建好了需要的開發(fā)環(huán)境，接下我們就可以開始開發(fā)了。
package.json 保存了我們剛才安裝的選項(xiàng)和依賴。最后
如果有什么想跟我討論的話，請(qǐng)私信。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/91195.html
摘要：但是實(shí)際上，回款管理和開票管理的組件文件也是加載了。所以下面引用按需加載來處理。是不是小很多了，然后和是按需加載的，就是需要的時(shí)候才加載。 1.前言 上篇文章（webpack+vue項(xiàng)目實(shí)戰(zhàn)（二，開發(fā)管理系統(tǒng)主頁面）），實(shí)現(xiàn)了，側(cè)邊欄的一個(gè)操作，點(diǎn)擊側(cè)邊欄的一些操作，最重要的就是路由的切換?？戳松弦黄幕锇橐膊浑y發(fā)現(xiàn)，除了點(diǎn)擊側(cè)邊欄‘首頁’之外，點(diǎn)擊其它的都是白色的一片。原因我想大家都...
摘要：好了，閑話不多說今天要說的時(shí)利用監(jiān)聽路由的方式，實(shí)現(xiàn)同個(gè)頁面不同狀態(tài)的切換。只要等于，那么頁面就是待確認(rèn)回款頁面進(jìn)入待確認(rèn)回款頁面中，回款狀態(tài)的篩選標(biāo)簽要加上。 1.前言 今天發(fā)完這一篇，就要這個(gè)系列告一段落了！以后如果有什么要補(bǔ)充的會(huì)繼續(xù)補(bǔ)充！因?yàn)樵诤笈_(tái)管理項(xiàng)目上，搭建的話，主要就是這樣了！還有的一些是具體到交互的處理，那個(gè)是要根據(jù)后端的需求，來進(jìn)來比較細(xì)化的工作，我在這里就不說了！...
摘要：開篇從今天起，小肆將和大家從頭開始做一個(gè)完整的實(shí)戰(zhàn)項(xiàng)目。關(guān)注技術(shù)放肆聊跟小肆一起行動(dòng)起來在這個(gè)項(xiàng)目中，小肆力爭(zhēng)做到以下幾點(diǎn)應(yīng)用目前最新的技術(shù)，并隨時(shí)間更新。 開篇 從今天起，小肆將和大家從頭開始做一個(gè)完整的實(shí)戰(zhàn)項(xiàng)目。其中遇到的每個(gè)知識(shí)點(diǎn)都是我們工作中常見的，這些知識(shí)點(diǎn)大多在網(wǎng)上都能找到但卻沒有哪個(gè)教程能都講得到，那就由小肆來做吧。 關(guān)注技術(shù)放肆聊,跟小肆一起行動(dòng)起來！ 在這個(gè)項(xiàng)目中，小...
摘要：前言在上一篇文章，已經(jīng)搭建好所需要的開發(fā)環(huán)境了接下來讓開發(fā)一個(gè)簡(jiǎn)單的項(xiàng)目吧。檢測(cè)路由變化獲取數(shù)據(jù)這三個(gè)方法都是改變地址欄然后通過檢測(cè)地址欄變化去請(qǐng)求數(shù)據(jù)。項(xiàng)目結(jié)構(gòu)最后如果有什么想跟我討論的話，請(qǐng)私信。 前言 在 上一篇文章 ，已經(jīng)搭建好所需要的開發(fā)環(huán)境了,接下來讓開發(fā)一個(gè)簡(jiǎn)單的項(xiàng)目吧。關(guān)于 less 我就不貼代碼了。 源碼地址 正題 先對(duì)默認(rèn)的文件進(jìn)行改造一下。刪除了默認(rèn)的 App.v...
閱讀 525·2023-04-26 00:33
閱讀 3549·2021-11-24 09:39
閱讀 2954·2021-09-22 15:34
閱讀 2325·2019-08-23 18:07
閱讀 2921·2019-08-23 18:04
閱讀 3710·2019-08-23 16:06
閱讀 2902·2019-08-23 15:27
閱讀 1620·2019-08-23 14:32
