vue腳手架搭建流程
搭建vue專案之前你需要安裝vue的腳手架和node.js,一起去看看怎麼搭建一個vue環境吧。(學程式語言最愛看見的就是用這個先寫一個helloworld,只想說我對世界友好可是現實是殘酷的。。。。。。)
1& 安裝node.js (安裝網址點選下面連結)
安裝完以後桌面上什麼都沒有是不是有點慌啊!不急,你先開啟Dos視窗,輸入以下命令,
如果介面如下:(恭喜你)
也有可能失敗,失敗的原因可能是系統許可權,目前還沒有找到最好的解決辦法。。。。。
Node.js是個啥人家首頁都寫著呢,俺就不給你解釋了哈。
2&安裝vue的腳手架
全域性安裝vue-cil,也就是所謂的腳手架(不要覺得有什麼高大尚的也就是如此而已)
1)用npm安裝(國際開源庫生態系統)
2)用cnpm安裝(使用國內映象安裝)
你先用淘寶映象安裝cnpm才可以使用哦
1.npm install -g cnpm --registry=https://registry.npm.taobao.org
檢查是否安裝上(cnpm -v)
2. 用cnpm安裝vue腳手架
cnpm install -g vue-cli
最後檢查自己是否安裝上:(vue -V)記住這裡的-V是大寫字母V,出不來可不要懶我,我可不會管你
特別注意:
1.如果提示“無法識別”,有可能是npm的版本過低。
解決辦法:npm install -g npm(更新一下版本就好了)。
2. 如果安裝失敗的話。
解決辦法:npm cache clean(清除一下快取就好了)
3&生成專案
首先需要用cd指令進入專案目錄進行搭建專案的資料夾
配置完成以後,可以看到目錄下多出一個專案資料夾,裡面就是vue-cli建立的一個局域webpack的vue.js專案。
然後進入專案目錄下:cd mai
上面腳手架給我們把常用的外掛都下載並且配置起來,比方說路由、以及es6轉成es5的外掛。
在做專案的過程我們常常用到資料的傳輸和各個元件的管理,所以接下來我們還需要安裝一些外掛:
安裝vue-resource是用於ajax請求的vue外掛 用來和伺服器端進行資料通訊
npm install vue-resource --save
安裝vuex是用於管理每個元件之間的狀態值的改變
npm install vuex --save
點選開啟連結(vuex的介紹和使用)
記住以上兩個必須安裝在專案裡哦,忘記了小姐姐可不會負責哦(沒事,錯了就重新來一遍唄)。
npm install(這樣就完成了)
最後就是啟動專案了(就問一句激不激動小夥伴們)
npm run dev
出現這個頁面就算是大功告成了(在瀏覽器上輸入localhost:8080就可以開啟如下介面)
(可以開始寫專案了。。。。。。)
特別注意:
如果瀏覽頁面打不開或者是沒有載入頁面,有可能是本地8080埠被佔用,又或者是你關閉了這個視窗。
解決辦法:
針對第一種情況:修改配置檔案就好了
開啟專案找到config>index.js
建議將埠號改為不常用的埠(例如:8075 8081等等埠,一般情況預設的埠號是8080)。
對於第二種情況:重啟一下JavaScript的執行環境就好了,至於怎麼啟動我就不說了。
4&打包上線
自己的專案檔案都需要放到 src 資料夾下
專案開發完成之後,可以輸入 npm run build 來進行打包工作
打包完成後,會生成 dist 資料夾,如果已經修改了檔案路徑,可以直接開啟本地檔案檢視,專案上線時,只需要將 dist 資料夾放到伺服器就行了。
匯入檔案以後,其檔案組織結構如下所示:
各個資料夾的含義如下:
|-- build // 專案構建(webpack)相關程式碼
| |-- build.js // 生產環境構建程式碼
| |-- check-version.js // 檢查node、npm等版本
| |-- dev-client.js // 熱過載相關
| |-- dev-server.js // 構建本地伺服器
| |-- utils.js // 構建工具相關
| |-- webpack.base.conf.js // webpack基礎配置
| |-- webpack.dev.conf.js // webpack開發環境配置
| |-- webpack.prod.conf.js // webpack生產環境配置
|-- config // 專案開發環境配置
| |-- dev.env.js // 開發環境變數
| |-- index.js // 專案一些配置變數
| |-- prod.env.js // 生產環境變數
| |-- test.env.js // 測試環境變數
|-- src // 原始碼目錄
| |-- components // vue公共元件
| |-- store // vuex的狀態管理
| |-- App.vue // 頁面入口檔案
| |-- main.js // 程式入口檔案,載入各種公共元件
|-- static // 靜態檔案,比如一些圖片,json資料等
| |-- data // 群聊分析得到的資料用於資料視覺化
|-- .babelrc // ES6語法編譯配置
|-- .editorconfig // 定義程式碼格式
|-- .gitignore // git上傳需要忽略的檔案格式
|-- README.md // 專案說明
|-- favicon.ico
|-- index.html // 入口頁面
|-- package.json // 專案基本資訊
最後來一個撩人小技能(得跟有好感的男盆友玩才有意思):
女:我們兩個有幾條腿?
男:4條腿
女:不對不對
男:??
女:一條腿,他們都說我們有一腿
(如果你的男盆友不安套路出牌的話我也沒有辦法了)