vue構建大型應用-起步


工欲善其事,必先利其器,vue大型單頁應用,需要做一些工具配置。

1、安裝git、nodejs(最新版的nodejs都包含了npm)。這兩個工具安裝都非常簡單,官網下包,運行,然后next...

2、安裝官方提供的快速構建工具vue-cli。在任意位置npm安裝命令:npm install -g vue-cli  (-g代表全局安裝,未帶該參數則是在當前路徑下下載vue-cli包)

3、接下來就可以用剛裝的vue-cli包進行快速構建你自己的項目:vue init <webpack> <your-projectname> (<>代表你可以根據項目需要選擇不同的模板和項目名稱進行構建)

    上述命令會從vuejs-templates拉取模板並安裝,所有的官方模板都可以在vuejs-templates organization找到,也可以運行vue list命令來看看現在有哪些官方模板是現在可用的

4、可以在當前目錄看你剛構建的項目,現在的模板項目還不完善,需要安裝他們依賴的項目包,還好這個事情package.json文件已經幫你配置好了,這時僅需要

a、進入到項目:cd your-projectname(如果已在項目內啟動git bash,則這步省略) b、安裝模板項目所需要的依賴:npm install

5、所有問題都已經處理好,這時就需要編譯運行(這里的編譯指的是廣義上的,如果直接打開index.html文件無法瀏覽,需要將vue拆分成瀏覽器識別的js、css、html)。查看package.json可以看到模板已幫我們配置好

a、開發階段:npm run dev (該種方式不會真正的生成打包后的文件,適合開發階段)   b、生產部署:npm run build(該種階段會根據配置生成打包后的代碼文件,配置在config/index.js中配置)

生產部署命令打包官網的配置路徑稍有不對,如果想生產部署生成的index.html文件雙擊運行正確,需要修改一處配置,地址:http://www.w3cfuns.com/notes/15904/fbb4d15b9c22fd373b605805bde8fd44.html

6、基本的前期構建已完成,接下來就是項目開發,尤大大給我們提供了很多很好的工具:VueRouter(類似angular router)VueResource(類似angular $http)

更多優勢可看:http://sugarball.me/vue-jsxue-xi-bi-ji-1-da-jia-vue-jskai-fa-kuang-jia/

 

 

學習資料:

vue官方教程:https://vuejs.org.cn/guide/installation.html

vue官方模板:https://github.com/vuejs-templates

webpack入門:http://www.w3cfuns.com/notes/15904/cad84afddab13604f987cbf511d265e4.html

vue-router:http://router.vuejs.org/zh-cn/basic.html

 


免責聲明!

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



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