1. 安裝node.js
- node.js是什么?
node.js是JavaScript的運行時環(huán)境,它不是一個JavaScript框架,更不是瀏覽器前端的庫,不能與jQuery、AngularJS等相提并論。node.js是一個讓JavaScript運行在服務(wù)端的開發(fā)平臺,它讓 JavaScript 成為與PHP、Python、Perl、Ruby 等服務(wù)端語言平起平坐的腳本語言。 - 安裝參考：http://www.cnblogs.com/wuac/p/6381819.html
2. 安裝npm（可略過，node安裝里面自帶了npm）
- 什么是npm？
它是node的包管理工具。npm為開發(fā)者提供了一個很好的分享重用的方式，同時提供了很好的方式來更新代碼。這些被重用的代碼稱作包，有時也稱作模塊。一個包通常包含了一個或者多個文件，同時也包含了一個定義了這個包元信息的文件"package.json"。在一個應(yīng)用中，例如網(wǎng)站會依賴成百上千個包，這些包一般來說都比較小。通常情況下開發(fā)者創(chuàng)建一個包用于解決一個特定的問題。 - 安裝命令：
npm install -g cnpm --registry=https://registry.npm.taobao.org
注：這里利用了淘寶的鏡像服務(wù)器，因為大部分的源都在國外的地址，安裝起來特別慢，所以這里使用了淘寶的鏡像。
3. 安裝vue-cli腳手架
接著安裝全局的vue-cli腳手架，用于幫助你快速搭建所需的Vue的開發(fā)模板框架
cnpm install -g vue-cli回車，等待安裝,安裝完成后，可以輸入vue -V 然后回車，如果出現(xiàn)vue客戶端版本號，則說明成功的安裝了vue
4. 用npm安裝webpack
- webpack是什么?有什么用?
WebPack可以看做是模塊打包機：它做的事情是，分析你的項目結(jié)構(gòu)，找到JavaScript模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），并將其打包為合適的格式以供瀏覽器使用。 - 安裝命令:
cnpm install webpack -g
可以使用:webpack -h試試是否安裝成功.
5. 快速構(gòu)建Vue項目
前面一大堆的安裝,就是為了接下來的快速構(gòu)建項目
步驟:
- 磁盤下新建目錄:如 D://demo/vue_test
- cd到D://demo/vue_test目錄下
- 輸入命令:
vue init webpack test1 //(項目名稱:test1),初始化項目以后,就可以看到許多的文件夾了
各個文件夾的說明如下:
目錄/文件 說明
build 項目構(gòu)建(webpack)相關(guān)代碼
config 配置目錄，包括端口號等。我們初學(xué)可以使用默認(rèn)的。
node_modules npm 加載的項目依賴模塊
src 這里是我們要開發(fā)的目錄，基本上要做的事情都在這個目錄里。里面包含了幾個目錄及文件：
assets: 放置一些圖片，如logo等。
components: 目錄里面放了一個組件文件，可以不用。
App.vue: 項目入口文件，我們也可以直接將組件寫這里，而不使用 components 目錄。
main.js: 項目的核心文件。
static 靜態(tài)資源目錄，如圖片、字體等。
test 初始測試目錄，可刪除
.xxxx文件 這些是一些配置文件，包括語法配置，git配置等。
index.html 首頁入口文件，你可以添加一些 meta 信息或統(tǒng)計代碼啥的。
package.json 項目配置文件。
README.md 項目的說明文檔，markdown 格式
- 切換到項目根目錄下(上面創(chuàng)建的目錄位置在
D://demo/vue_test/test1) - 如果沒有安裝npm,需要先安裝npm
-
npm run dev以開發(fā)模式運行項目
此時就已經(jīng)看到項目啟動了
D:\vue\test_vue_cli\vue-test1>npm run dev
> test1@1.0.0 dev D:\vue\test_vue_cli\vue-test1
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
95% emitting
DONE Compiled successfully in 3835ms 10:15:27
I Your application is running here: http://localhost:8081
訪問地址: http://localhost:8081 , 即可看到如下的頁面
捕獲.PNG
此時說明項目已經(jīng)成功的運行了。
6. 部署編譯
- 在項目的根目錄下運行命令
npm run build執(zhí)行打包,命令執(zhí)行完畢以后,即可在項目的根目錄下看到生成了一個dist的文件夾, 此dist文件夾就是打包生成好的項目了,可以直接放在nginx下進(jìn)行部署了 - 網(wǎng)上下載nginx,下載地址http://nginx.org/en/download.html,下載時候一定要注意自己的環(huán)境是windows還是linux環(huán)境，以免下錯版本，解壓下載好的nginx文件
- 配置部署，編輯
D:\software\nginx\nginx-1.15.5\conf\nginx.conf下的nginx.conf,修改如下圖
server {
listen 80;
server_name localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
root "D:\demo\vue-test\test1\dist";
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
主要關(guān)注的地方有:
listen 80; // 部署的端口號
server_name localhost; // 服務(wù)的地址
location / { root "D:\demo\vue-test\test1\dist"; // 剛才編譯的dist目錄 index index.html index.htm; }
啟動nginx
命令行中切換到nginx解壓目錄的根目錄,執(zhí)行start nginx停止nginx服務(wù)
nginx -s quit重啟nginx服務(wù)
nginx -s reload
nginx文檔參考:http://www.nginx.cn/doc/
水平有限，歡迎大家批評指正~
