vue項目建立

安裝node.js
①下載node,一路'next'.安裝完成後,打開命令行工具輸入:node -v,若是出現對應版本號,舊說明安裝成功了.
咱們所須要的npm包管理器,是集成在node中的,因此,直接輸入:npm -v就會出現npm的版本信息.前端

安裝cnpm
②npm包管理工具備些資源被牆,爲了更快更穩定,因此咱們須要切換到淘寶的npm鏡像---cnpm
在命令行中輸入: npm install -g cnpm --registry=https://registry.npm.taobao.org
而後等待,完成安裝.
輸入:cnpm -v,能夠查看到當前cnpm版本,這個和npm的版本仍是不同的.
使用cnpm的方法就是,須要用到npm的地方直接使用cnpm替換就能夠了vue

vue安裝
③在用vue.js構建大型應用時推薦使用npm安裝,npm能很好的和諸如webpack或browserify模塊打包器配合使用.vue.js也提供工具來開發單文件組件
在命令行輸入:cnpm install vuenode

安裝vue-cli腳手架構建工具
④vue-cli提供一個官方命令行工具,可用於快速搭建大型單頁應用.該工具提供開箱即用的構建工具配置,帶來現代化的前端開發流程.
只須要幾分鐘便可建立並啓動一個帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目
#全局安裝 vue-cli
在命令行輸入:cnpm install --global vue-cliwebpack

建立一個基於webpack模板的新項目
⑤要建立項目,首先咱們要宣定國目錄,而後在命令行中把目錄轉到選定的目錄,可使用;
#沒有-project爲自定義項目名
在命令行中輸入:vue init webpack my-project
運行初始化命令的時候回讓用戶輸入幾個基本的選項,如項目名稱,描述,做者等信息,若是不想 填直接回車默認就好。web

須要注意的是項目的名稱不能大寫,否則會報錯。
Project name (my-project) # 項目名稱(個人項目)
Project description (A Vue.js project) # 項目描述一個Vue.js 項目 Author 做者(你的名字) I
nstall vue-router? (Y/n) # 是否安裝Vue路由,也就是之後是spa(但頁面應用須要的模塊)
Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代碼? (Y [ yes ] / N [ no ])
Pick an ESLint preset (Use arrow keys) # 選擇一個預置ESLint(使用箭頭鍵)
Setup unit tests with Karma + Mocha? (Y/n) # 設置單元測Karma + Mocha? (Y/ N)
Setup e2e tests with Nightwatch? (Y/n) # 設置端到端測試,Nightwatch? (Y/ N)
固然這些都看你本身我的的狀況,我這裏是全選了是。vue-router

安裝所需的依賴
⑥使用下面的命令安裝項目的依賴:cnpm installvue-cli

進入你的項目文件夾
⑦在命令行輸入: cd [你的項目路徑]npm

運行項目
⑧在命令行輸入: cnpm run dev
而後複製出現的網址,在瀏覽器中訪問能夠看到項目的啦!瀏覽器

相關文章
相關標籤/搜索