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