Vue-cli
1 . Vue-cli安裝
npm install vue-cli -g
2 .創(chuàng)建項目
- vue init <template-name> <project-name>
init:表示我要用vue-cli來初始化項目
<template-name>:表示模板名稱挠阁,vue-cli官方為我們提供了5種模板冗锁,
webpack-一個全面的webpack+vue-loader的模板,功能包括熱加載棱貌,linting,檢測和CSS擴展。
webpack-simple-一個簡單webpack+vue-loader的模板精续,不包含其他功能坝锰,讓你快速的搭建vue的開發(fā)環(huán)境。
browserify-一個全面的Browserify+vueify 的模板重付,功能包括熱加載顷级,linting,單元檢測。
browserify-simple-一個簡單Browserify+vueify的模板确垫,不包含其他功能弓颈,讓你快速的搭建vue的開發(fā)環(huán)境。
simple-一個最簡單的單頁應用模板删掀。
<project-name>:標識項目名稱翔冀,這個你可以根據(jù)自己的項目來起名字。
- 創(chuàng)建基于 Webpack的項目
vue init webpack vuecliTest
- 創(chuàng)建項目時詢問選項說明
Project name :項目名稱 披泪,如果不需要更改直接回車就可以了纤子。注意:這里不能使用大寫,所以我把名稱改成了vueclitest
Project description:項目描述款票,默認為A Vue.js project,直接回車控硼,不用編寫。
Author:作者徽职,如果你有配置git的作者象颖,他會讀取。
Install vue-router? 是否安裝vue的路由插件姆钉,我們這里需要安裝说订,所以選擇Y
Use ESLint to lint your code? 是否用ESLint來限制你的代碼錯誤和風格。我們這里不需要輸入n潮瓶,如果你是大型團隊開發(fā)陶冷,最好是進行配置。
setup unit tests with Karma + Mocha? 是否需要安裝單元測試工具Karma+Mocha毯辅,我們這里不需要埂伦,所以輸入n。
Setup e2e tests with Nightwatch?是否安裝e2e來進行用戶行為模擬測試思恐,我們這里不需要沾谜,所以輸入n。
3 . 運行項目
- cd vuecliTest 進入我們的vue項目目錄
- npm install 安裝我們的項目依賴包胀莹,也就是安裝package.json里的包基跑,如果你網速不好,你也可以使用cnpm來安裝描焰。
- npm run dev 開發(fā)模式下運行我們的程序媳否。