vuejs學習——vue+vuex+vue-router項目搭建(一)


前言

  快年底了卻有新公司邀請了我,所以打算把上家公司的學到一下技術做一些總結和分享。

  現在vuejs都2.0了,我相信也有很多朋友和我一樣實際項目還是選擇vue1.0的或者給新手一些參考,不管在選擇哪個版本的時候,希望你都熟讀了vue+vuex+vue-router的官方文檔。下面我們就開始吧。

Vue搭建

  這里我假設我們的電腦都安裝了nodejs,那么我現在開始吧。

  我們先新建一個文件(VueProject),通過命令行的方式進入這個文件夾,現在假設我們進入了VueProject文件夾,接下來進入正題吧。

  進入安裝vue的正題時,我們先安裝淘寶源,這樣會加快我們下載,在命令行中輸入一下代碼。

  $ npm install -g cnpm --registry=https://registry.npm.taobao.org

  官網是最好的老師,給出了完整的安裝vue的步驟:

    步驟1:cnpm install -g vue-cli

    步驟2:vue init webpack

      進行到這步你會發現他有這樣的提示:

      

    直接webpack下載的是最新版本 安裝1.x要在webpack后面加#1.0,我們安裝的是1.x的項目這我們使用 vue init webpack#1.0 go!

    步驟3:cnpm install

    步驟4:npm run dev

     

     命令行中看這個界面,恭喜你vue項目搭建好了,接下來我們在瀏覽器中輸入 localhost:8080 

端口修改

    localhost:8080 有可能其他軟件占用了,導致其他問題的出現 我們可以動態修改地址

    首先我們的項目文件,在找到下圖文件夾里的index.js
    

    打開index.js

    

    你會發現在dev中有port:8080,這就是我們的端口,這里隨便修改成你想要的端口即可。

界面展示

     瀏覽器中輸入 localhost:****  回車!界面美美的。

    

  歐耶,vue搭建好了,大家趕快體驗一下vue的美麗把。下一篇文章我以現在的基礎繼續搭建vue-router,我們下一章見。

  新手寫博客有什么表達不清,寫的不好的,請大家多給給意見。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM