webpack + vue的搭建

1.安裝vueCli

　　安裝vue-cli的前提是你已經安裝了npm，若是你沒有安裝,能夠直接下載node的安裝包進行安裝,安裝成功後,

在命令行輸入 npm -v 若是看到版本號 就證實咱們已經安裝成功了.

node安裝包下載

 npm 沒有問題 咱們就能夠安裝vueCli了

npm install vue-cli -g

-g 表明全局 若是安裝失敗,通常是網絡緣由,也能夠用cnpm來安裝 方法以下,

npm install cnpm -g

安裝完成後,用cnpm 來安裝vueCli

cnpm install vue-cli -g

安裝完成後，能夠用vue -V來進行查看 vue-cli的版本號。必定要注意這裏的V是大寫的。我這裏版本號是2.9.6.

2.項目初始化

　　咱們新建一個文件夾 用vs code 打開(我的喜愛,別的編譯工具或者cmd也能夠)

npm 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的開發環境。

　　browserify-一個全面的Browserify+vueify 的模板，功能包括熱加載，linting,單元檢測。

　　browserify-simple-一個簡單Browserify+vueify的模板，不包含其餘功能，讓你快速的搭建vue的開發環境。

　　simple-一個最簡單的單頁應用模板。

<project-name>：標識項目名稱，這個你能夠根據本身的項目來起名字,也能夠不填。

在工做中，咱們使用webpack模板比較多，因此咱們這裏也是用webpack，在命令行輸入如下命令：

vue init webpack vueTest

輸入命令後，會詢問咱們幾個簡單的選項，咱們根據本身的須要進行填寫就能夠了。

• Project name :項目名稱 ，若是不須要更改直接回車就能夠了。注意：這裏不能使用大寫，因此我把名稱改爲了vueclitest
• 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。

 

 

若是出現以上界面,就表示咱們已經成功了,而且提示咱們要作的三件事。

一、cd vuecliTest  進入vue項目目錄。

二、npm install  安裝項目依賴包，也就是安裝package.json裏的包，若是你網速很差，你也可使用cnpm來安裝。

三、npm run dev 開發模式下運行咱們的程序。