Vue2.0使用vue-cli + webpack搭建項目

Vue2.0使用vue-cli + webpack搭建項目

說明：總結搭建vue2.0項目的步驟

1、安裝環境

一、這個問題不須要多少，必備的node環境及npm

二、全局安裝webpack

打開終端（或cmd）輸入： npm install webpack -g ，等待安裝完成再輸入：webpack -v 查看版本號，若是出現版本號則說明安裝成功

三、全局安裝vue-cli腳手架

終端（或cmd）輸入：npm install vue-cli -g, 安裝完成後輸入： vue -V, 若是出現相應版本號則說明安裝成功

2、使用vue-cli構建項目

一、在桌面或磁盤任意盤符下新建一個文件夾，使用終端（或cmd）cd到新建的文件夾下

二、終端（或cmd）輸入：vue init webpack 工程名字 在新建文件夾下安裝vue-cli，這裏須要注意工程的名字不要出現中文，其餘能夠隨便起，輸入完成後回車會出現以下的提示：

$ vue init webpack vue2.0 ----安裝vue-cli

This will install Vue 2.x version of the template. ----提示建立vue項目說明

? Project name (vue2.0) ----項目名稱，若是不輸入直接回車則默認vue2.0

? Project name vue2.0

? Project description (A Vue.js project) ----項目描述，可寫可不寫

？Project description A Vue.js project

？Author Datura ----項目建立者，可寫可不寫

？Author Datura

？Vue build (Use arrow keys)

? Vue build standalone

? Install vue-router? (Y/n) Y ----是否安裝Vue路由，我選擇的是

? Install vue-router? Yes

? Use ESLint to lint your code? (Y/n) n ----是否啓用eslint檢測，我選擇的是no

? Use ESLint to lint your code? No

? Setup unit tests with Karma + Mocha? (Y/n) Y

? Setup unit tests with Karma + Mocha? Yes

? Setup e2e tests with Nightwatch? (Y/n)

? Setup e2e tests with Nightwatch? Yes

vue-cli · Generated "vue2.0".

To get started: ----提示如何進入項目並啓動項目

cd vue2.0 ----進入到項目根目錄下

npm install ----安裝項目依賴文件

npm run dev ----啓動項目，默認端口是8080，若是電腦目前有其餘的項目佔用了8080端口，項目啓動會報錯，能夠在項目中config > index.js中找到port：8080直接修改爲其餘端口就能夠了

3、至此項目初始結構的搭建已完成，上一張項目運行起來的效果圖