vue筆記4—— 使用vue-cli搭建項目

node.js的安裝參照http://www.javashuo.com/article/p-mpdcimfc-hw.html

一、安裝完node.js以後全局安裝vue-cli

npm install -g vue-cli

二、安裝完vue-cli腳手架以後就能夠建立本身的項目了

vue init webpack my-project

命令輸入完成後敲回車，此時會自動下載模板，會讓你按提示完成項目的建立，以下圖

（1）Project name:——項目名稱

（2）Project description:——項目描述

（3）Author:——做者

（4）Vue build:——構建模式，通常默認選擇第一種

（5）Install vue-router?:——是否安裝引入vue-router，這裏選是，vue-router是路由組件,後面構建項目會用到

（6）Use ESLint to lint your code?:——這裏強烈建議選no 不然你會很是痛苦，eslint的格式驗證很是嚴格，多一個空格少一個空格都會報錯，因此對於新手來講，通常不建議開啓，會加大開發難度

（7）Setup unit tests with Karma + Mocha 以及Setup e2e tests with Nightwatch這兩個是測試，能夠不用安裝

三、安裝依賴

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

（1）build和config都是webpack的配置

（2）src是存放源文件的目錄

  src文件夾裏面

這個文件夾是整個項目最主要以及使用頻率最高的文件夾。

「assets」: 共用的樣式、圖片

「components」: 業務代碼存放的地方，裏面分紅一個個組件存放，一個頁面是一個組件，一個頁面裏面還會包着不少組件

「router」: 設置路由

「App.vue」: vue文件入口界面

「main.js：對應App.vue 建立vue實例，也是入口文件，對應webpack.base.config.js裏的入口配置

（3）存放的文件不會通過webpack處理，能夠直接引用，例如swf文件若是要引用能夠在webpack配置對swf後綴名的文件處理的loader，也能夠直接將swf文件放在這個文件夾引用

（4）babelrc是babel的配置項

（5）editorconfig是編輯器的配置項

（6）index.html是入口頁面

（7）package.json是項目的描述和依賴，咱們在開始的時候執行npm run dev，就至關於執行了這個文件裏面的scripts的dev對應的 node build/dev-server.js。

接下來使用命令行工具

cd my-project

npm install

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

四、運行項目

到項目所在目錄下，輸入npm run dev，回車，啓動項目

到此項目已經搭建完成

瀏覽器中輸入網址http://localhost:8080，就能夠看到以下畫面，接下來就能夠開始開發啦！