[轉] 從零構建 vue2 + vue-router + vuex 開發環境到入門，實現基本的登入退出功能
阿新 • • 發佈：2018-11-09
這是一個創建於 738 天前的主題，其中的資訊可能已經有所發展或是發生改變。
前言
vue2 正式版已經發布將近一個月了，
國慶過後就用在了公司的兩個正式專案上，
還有一個專案下個月也會採用 vue2 進行重構
選擇它沒什麼理由，如果非要說一個理由
那就是它的中文文件遠比 react ， angularjs 要友好
github:https://github.com/lzxb/vue2-demo
原始碼說明
專案目錄說明
.
|-- config // 專案開發環境配置
| |-- index.js // 專案打包部署配置
|-- src // 原始碼目錄
| |-- components // 公共元件 | |-- header.vue // 頁面頭部公共元件 | |-- index.js // 載入各種公共元件 | |-- config // 路由配置和程式的基本資訊配置 | |-- routes.js // 配置頁面路由 | |-- css // 各種 css 檔案 | |-- common.css // 全域性通用 css 檔案 | |-- iconfont // 各種字型圖示 | |-- images // 公共圖片 | |-- less // 各種 less 檔案 | |-- common.less // 全域性通用 less 檔案 | |-- pages // 頁面元件 | |-- home // 個人中心 | |-- index // 網站首頁 | |-- login // 登入 | |-- signout // 退出 | |-- store // vuex 的狀態管理 | |-- index.js // 載入各種 store 模組 | |-- user.js // 使用者 store | |-- template // 各種 html 檔案 | |-- index.html // 程式入口 html 檔案 | |-- util // 公共的 js 方法， vue 的 mixin 混合 | |-- app.vue // 頁面入口檔案 | |-- main.js // 程式入口檔案，載入各種公共元件 |-- .babelrc // ES6 語法編譯配置 |-- gulpfile.js // 啟動，打包，部署，自動化構建 |-- webpack.config.js // 程式打包配置 |-- server.js // 代理伺服器配置 |-- README.md // 專案說明 |-- package.json // 配置專案相關資訊，通過執行 npm init 命令建立 . 開發環境依賴模組說明
webpack 相關模組
webpack // 用來構建打包程式
webpack-dev-server // 開發環境下，設定代理伺服器
html-webpack-plugin // html 檔案編譯
url-loader // 圖片 轉化成 base64 格式 file-loader // 字型 將字型檔案打包 css-loader // css 生成 less // css 前處理器 less less-loader // css 前處理器 less 的 webpack 外掛 style-loader // css 插入到 style 標籤 autoprefixer-loader // css 瀏覽器相容性問題處理 babel-core // ES6 程式碼轉換器 babel-loader // ES6 程式碼轉換器， webpack 外掛 babel-plugin-transform-object-assign // ES6 Object.assign 方法做相容處理 babel-preset-es2015 // ES6 程式碼編譯成現在瀏覽器支援的 ES5 babel-preset-stage-0 // ES6 ES7 要使用的語法階段 vue-loader // vue 元件編譯 babel-helper-vue-jsx-merge-props // vue jsx 語法編譯 babel-plugin-syntax-jsx // vue jsx 語法編譯 babel-plugin-transform-vue-jsx // vue jsx 語法編譯 gulp 相關模組
gulp // 用來構建自動化工作流
gulp-sftp // 將程式碼自動部署到伺服器上
del // 程式碼部署成功後，刪除本地編譯的程式碼
其他模組
cross-env // 解決跨平臺設定 NODE_ENV 的問題
生產模組依賴說明
vue 全家桶
vue // 構建使用者介面的
vue-router // 路由
vuex // 元件狀態管理
頁面說明
/login // 登入，不需要登入可以訪問
/signout // 退出登入，需要登入後才可以訪問
/home // 個人中心，需要登入後才可以訪問
/ // 首頁，不需要登入可以訪問
* // 強制跳轉到登入頁面 執行程式
npm install
npm run dev
http://localhost:3000/app/
開發教程
1.安裝開發環境
vs code https://code.visualstudio.com
開發時所用的編輯器，內建了終端，開發時使它執行命令執行程式
Node.js https://nodejs.org
JS 伺服器端的執行環境，內建 npm 包管理器，管理專案依賴的各種模組，編譯程式碼，自動部署到伺服器就全靠他了
2.安裝全域性模組
webpack
npm install -g webpack
webpack 是一款模組載入器兼打包工具，它能把各種資源，例如 JS （含 JSX ）、 coffee 、樣式（含 less/sass ）、圖片等都作為模組來使用和處理
gulp
npm install -g gulp
gulp 是一個自動化構建工具,開發者可以使用它在專案開發過程中自動執行常見任務
3.建立專案
建立專案目錄，並且在專案目錄下執行命令，初始化 package.json 檔案
npm init
4.安裝開發環境依賴模組 npm install --save-dev 模組名
npm install --save-dev webpack webpack-dev-server html-webpack-plugin url-loader file-loader css-loader less less-loader style-loader autoprefixer-loader babel-core babel-loader babel-plugin-transform-object-assign babel-preset-es2015 babel-preset-stage-0 vue-loader babel-helper-vue-jsx-merge-props babel-plugin-syntax-jsx babel-plugin-transform-vue-jsx gulp gulp-sftp del cross-env
5.安裝生產環境依賴模組 npm install --save 模組名
npm install --save vue vue-router vuex
5.搭建開發環境
- config/index.js 配置專案開發時的資訊
- webpack.config.js webpack 打包配置
- .babelrc ES6 編譯配置
- server.js 設定代理伺服器
- gulpfile.js 自動化打包，編譯，壓縮，部署伺服器
- package.json 執行 npm init 初始化專案，自定義命令，啟動程式，自動部署
6.測試編譯
src/template/index.html
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8"> <title>vue2-demo</title> </head> <body> </body> </html> src/main.js
alert('test')
1.執行程式執行命令： npm run dev
2.然後開啟網址： http://localhost:3000/app/
3.如果瀏覽器彈出 test ，說明我們的開發環境已經搭建通過。 package.json 自定義命令說明
npm run dev 開發環境
npm run dev:test 將程式碼打包到測試伺服器
npm run dev:dist 將程式碼打包到正式伺服器