vue-cli開發-搭建項目(一)

前言

vue-cli是Vue官方提供的命令行工具，可用於快速搭建大型單頁應用。集成了webpack環境及主要依賴，對於項目的搭建、打包、維護管理等都很是方便快捷。建議先熟悉 Vue 自己以後再研究 CLI。
使用以前須要對 Node.js 和相關構建工具備必定程度的瞭解。

安裝

先決條件：Node.js（> = 4.x，6.x首選），npm版本3+和Git。

注：建議將 npm 的註冊表源設置爲國內的鏡像，能夠大幅提高安裝速度。
npm config set registry https://registry.npm.taobao.org //更換國內淘寶的鏡像
注意：安裝完後最好查看其版本號cnpm -v或關閉命令提示符從新打開，安裝完直接使用有可能會出現錯誤；
cnpm跟npm用法徹底一致，只是在執行命令時將npm改成cnpm（如下操做將以cnpm代替npm）。

全局安裝vue-cli
npm install -g vue-cli

建立項目

瞭解官方模板

Vue官方爲咱們提供了幾種模板，方便咱們進行快速開發。根據須要選擇適合本身的模板。
當前可用的模板包括：
webpack - 一個全功能的Webpack + vue-loader設置，具備熱從新加載，linting，測試和css提取。
webpack-simple - 一個簡單的Webpack + vue-loader設置，用於快速原型製做。
browserify -全功能Browserify + vueify設置用熱重裝載，掉毛＆單元測試。
browserify -simple - 一個簡單的Browserify + vueify設置，用於快速原型製做。
pwa - 基於webpack模板的vue-cli的PWA模板
simple - 單個HTML文件中最簡單的Vue設置

提取模板建立項目

安裝完vue-cli腳手架以後，咱們就能夠開始建立本身的項目。
用法vue init < template-name > < project-name >
使用方法vue init webpack my-project
上述命令從vuejs-templates / webpack中提取模板，提示輸入一些信息，並在其中生成項目./my-project/。
命令輸入完成後敲回車，此時會自動下載template模板，稍微等待一會，會讓你按提示完成項目的建立，以下圖

固然這些都看你本身的愛好了。
最後生成 Vue.js 的webpack 項目

安裝依賴

項目建立完成以後能夠看到目錄結構以下

接下來使用命令行工具
cd vuedemo//CD個人項目
npm install//NPM安裝依賴

能夠在項目目錄裏直接安裝，是由於有package.json這個文件，裏面包含了須要安裝的包的名稱。安裝完成後，能夠在目錄中發現多出了node_modules這個文件夾，裏面爲下載的依賴。

運行項目

使用命令行工具cmd，到項目所在目錄下，輸入npm run dev,回車，啓動項目
到此項目已經搭建完成，即可以在D:vuedemosrc目錄下進行開發

項目打包

運行npm run build運行後打包成功會在項目中生成dist文件夾部署服務器是把文件夾中的文件丟上服務器便可