工欲善其事,必先利其器,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