本文是基於vuecli2搭建的項目.
1. 下載安裝nodejs
地址：https://nodejs.org/en/download/
選擇安裝版windows .msi, 不要選擇壓縮版
下載完成后，下一步-->下一步-->安裝完成
npm: node pageage mangemen node.js的包管理器, 集成到node.js中了.
驗證node是否安裝成功:
打開命令行(windows)或終端(mac),在命令行(終端)中輸入：
node -v 如果提示出版本信息則說明node安裝成功
npm -v 如果提示出版本信息則說明npm安裝成功
如果輸入npm -v沒有反應, 刪除C:\Users{賬戶}\下的.npmrc文件就可以了.
2. 安裝淘寶鏡像
在終端輸入：sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
根據提示輸入密碼，等待安裝成功
驗證淘寶鏡像是否安裝成功：
在終端輸入cnpm -v 如果提示出版本信息則說明cnpm淘寶鏡像安裝成功
cnpm安裝成功后，以后npm install 命令用cnpm install代替.
也可以全局安裝yarn, 后續用yarn命令
3. 安裝yarn
yarn是一個包管理器, 與npm很多功能都是相同的,數據格式也一致,並且更加輕量化, 命令也比較簡潔, 所以包管理器可以在npm和yarn中選其一.
詳見yarn官方文檔
4. 安裝vue腳手架：
vue-cli:基於node.js的開發環境的腳手架.
腳手架:有人將開發過程中用到的工具和環境都配置好了,直接可以做開發而不用考慮搭建這些工具環境了.
在終端中輸入命令： cnpm install vue-cli –g (mac中有install的全部要加sudo)
(-g全局安裝，全局安裝即就將當前的工具安裝在了node的安裝目錄下)
驗證vue-cli是否安裝成功:
在終端輸入vue -V 如果提示出版本信息則說明vue-cli安裝成功
---------------以上步驟都是工具,只需安裝一次,以下步驟是每個項目的過程----------------
5. 拉取項目模版
新建一個存放項目的文件夾(如：Vue_Code7)，在該文件夾下打開終端
通過下面的簡單的Linux命令進入到指定的文件夾：
ls 列出當前所在目錄下的所有文件及文件夾
cd xxx 進入到當前目錄下的指定的文件夾
cd ../ 返回上一級目錄
在指定文件夾下打開終端后，在終端中輸入：
sudo vue init webpack my-project
(webpack是官方模版，my-project是自定義的項目名稱)
也可以自定義模板
回車 intall vue-router? 是否裝vue-router(看項目需要)
Use ESLint to lint your code? n
Set up unit tests 是否安裝小測試
Pick a test runner
Setup e2e tests with Nightwatch?
Should we run 'npm install' for you after the...? no,I will ....進入第5步
6. 下載安裝項目依賴
如果在拉取模版時沒有下載安裝依賴，則需要執行如下操作
1）進入項目所在的項目文件夾
cd my-project(項目名稱)
新打開的項目需要先安裝下依賴
2）通過下面的命令安裝依賴：
sudo cnpm install
3) mac系統無法保存,打開項目根目錄,顯示簡介,解鎖,全部修改為讀與寫,應用到所有項目,上鎖.
npm是國外服務器的,用來安裝很慢, cnpm是淘寶鏡像,用來安裝很快
7.啟動項目
在項目文件夾下打開終端,運行下面的命令:
npm run dev
如報錯,試下下面的命令:
npm install --save-dev webpack-dev-server@2.9.7
啟動完成將會提示http://localhost:8080這樣的地址,也就是運行地址.
在package.json中dev中配置--open 'Google Chrome'就會自動打開瀏覽器運行,不加瀏覽器名就是打開默認瀏覽器.
"scripts": {
"dev": "webpack-dev-server --inline --progress --open --config build/webpack.dev.conf.js",
...}
windows系統: 打開根目錄,選中文件右鍵打開命令窗口
mac:系統偏好設置,鍵盤,快捷鍵,服務,終端勾選.打開根目錄,選中文件右鍵打開命令窗口
修改運行的端口和域名,可以在config/index.js中修改:
dev{
host: '127.0.0.1', // can be overwritten by process.env.HOST
port: 8080,
}
8. 項目運行的流程
第一步：執行npm run dev,
即執行 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
第二步：使用webpack工具(打包捆綁工具)根據build/webpack.dev.conf.js配置文件將項目打包到內存中
webpack根據配置文件加載所配置loader對入口文件及其所引用到的文件進行編譯，
編譯完成后webpack根據入口出口配置，將所有用到的文件打包到出口文件(app.js)
在利用所配置的插件(HtmlWebpackPlugin)將出口文件自動插入到項目中的index.html
最后在項目目錄下啟動devServer服務器
第三步：服務啟動后，自動打開項目下的index.html文件，用瀏覽器執行起來.