vue的安裝
Vue.js不支持IE8及以下版本。因為Vue.js使用了ECMAScript5特性,IE8顯然不能模擬。
Vue.js支持所有兼容ECMAScript5的瀏覽器。
在用Vue.js構建大型應用時,推薦使用npm安裝,npm能很好的和webpack等打包工具配合使用。
首先Vue的安裝依賴於node.js,要保證你的計算機上已經安裝過node.js。
如何查看node是否安裝或者node版本呢?
進入cmd,輸入命令 node -v,回車查看。node最好使用新一些的版本,否則后續安裝會提示node版本過低
如果是安裝過node,則會顯示node的版本,否則就會提示不是內部或外部命令,這時候需要自行去node官網下載
並安裝
1,安裝vue
npm install vue
安裝完畢后,可以檢驗版本。
vue -V
到此vue安裝成功
創建一個vue項目
1,全局安裝 vue-cli
npm install --global vue-cli
2 , 創建一個基於webpack 模板的新項目
vue init webpack new-project
輸入上面命令后,會詢問幾個選項,根據自己需要填寫就可以了。
Project name :項目名稱,如果不需要就直接回車。注:此處項目名不能使用大寫。
Project description:項目描述,直接回車
Author :作者
vue build 構建方式(暫且這么解釋)
兩個選擇(上下箭頭選擇,回車即為選定)
1.Runtime + Compiler:recommended for most users
(譯:運行+編譯:被推薦給大多數用戶)
2.Runtime-only:about 6KB lighter min+gzip,but templates (or any Vue-specific HTML) are ONLY
allowed in .vue files-render functions are required elsewhere
(譯:只運行大約6KB比較輕量的壓縮文件,但只允許模板(或任何VUE特定HTML)。VUE文件需要在其他地方呈現函數。翻譯不精准,意思大概是選擇該構建方式對文件大小有要求)
這里推薦使用1選項,適合大多數用戶的
install vue-router?是否安裝vue的路由插件,需要就選y,否則就n(以下均遵循此方法)
Use ESLint to lint your code?是否使用ESLint檢測你的代碼?
(ESLint 是一個語法規則和代碼風格的檢查工具,可以用來保證寫出語法正確、風格統一的代碼。)
Pick an ESLint preset:選擇分支風格
選項有三個
1.standard(https://github.com/feross/standard) js的標准風格
2.Airbnb(https://github.com/airbnb/javascript) JavaScript最合理的方法,這個github地址說是JavaScript最合理的方法
3.none (configure it yourself) 自己配置
Setup unit tests? 是否安裝單元測試(暫不詳細介紹)
Pick a test runner 選擇一個單元測試運行器
選項有三個
1.Jest(Jest是由Facebook發布的開源的、基於Jasmine的JavaScript單元測試框架)
2.Karma and Mocha
3.none
Setup e2e tests with Nightwatch(Y/n)?是否安裝E2E測試框架NightWatch(E2E,也就是End To End,就是所謂的“用戶真實場景”。)
Should we run 'npm install' for you after the project has been created?(譯:項目創建后是否要為你運行“npm install”?這里選擇包管理工具)
選項有三個
yes,use npm(使用npm)
yes,use yarn(使用yarn)
no,I will handle that myself(自己操作)
一路回車到此等待安裝完畢,會提示接下來的命令行
3,安裝依賴
進入項目
cd new-project
安裝
npm install
4,啟動項目
npm run dev
這時候在瀏覽器中打開cmd上顯示的地址就可以看到新建的頁面。
http://localhost:8081
但是這個只能在本地跑,要如何在我們自己的服務器上訪問呢? 此時需要執行: ·
npm run build
會生成靜態文件,在根目錄的dist里,里面有個index.html,這是服務器訪問的路徑指定到這里就可以訪問我們自己的項目了。