vue環境搭建

vue

首先以確定安裝node.js,建立項目目錄,下載vue.js ,script引入,或者cdn引入,npm全局安裝live-server:

$ npm install -g live-server

在項目根目錄文件夾啓用:

$ live-server

初始化項目文件:

$ npm init

vue項目環境搭建

1.按Win+R,然後在文本框中輸入cmd,回車打開命令行,輸入vue-cli安裝命令:

$ npm install vue-cli -g

2.用vue init命令來初始化項目:

$ vue init <template-name> <project-name>

template-name:表示模板名稱,vue-cli官方爲我們提供了5種模板

  • webpack-一個全面的webpack+vue-loader的模板,功能包括熱加載,linting,檢測和CSS擴展。
  • webpack-simple-一個簡單webpack+vue-loader的模板,不包含其他功能,讓你快速的搭建vue的開發環境。
  • browserify-一個全面的Browserify+vueify 的模板,功能包括熱加載,linting,單元檢測。
  • browserify-simple-一個簡單Browserify+vueify的模板,不包含其他功能,讓你快速的搭建vue的開發環境。
  • simple-一個最簡單的單頁應用模板。
    project-name:標識項目名稱,這個你可以根據自己的項目來起名字。
    在實際開發中,一般我們都會使用webpack這個模板,如
$ vue init webpack vuecliTest

輸入命令後,會詢問我們幾個簡單的選項,我們根據自己的需要進行填寫就可以了。

  • Project name :項目名稱 ,如果不需要更改直接回車就可以了。注意:這裏不能使用大寫。
  • Project description:項目描述,默認爲A Vue.js project,直接回車,不用編寫。
  • Author:作者,如果你有配置git的作者,他會讀取。
  • Install vue-router? 是否安裝vue的路由插件,我們這裏需要安裝,所以選擇Y
  • Use ESLint to lint your code? 是否用ESLint來限制你的代碼錯誤和風格。我們這裏不需要輸入n,如果你是大型團隊開發,最好是進行配置。
  • setup unit tests with Karma + Mocha? 是否需要安裝單元測試工具Karma+Mocha,我們這裏不需要,所以輸入n。
  • Setup e2e tests with Nightwatch?是否安裝e2e來進行用戶行爲模擬測試,我們這裏不需要,所以輸入n。

然後,命令行提示我們現在可以作的三件事情。
1.cd project-name 進入我們的vue項目目錄。
2.npm install 安裝我們的項目依賴包,也就是安裝package.json裏的包,如果你網速不好,你也可以使用cnpm來安裝。
3.npm run dev 開發模式下運行我們的程序。給我們自動構建了開發用的服務器環境和在瀏覽器中打開,並實時監視我們的代碼更改,即時呈現給我們。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章