從零構建 vue2 + vue-router + vuex 開發環境到入門，實現基本的登陸退出功能

時間 2019-11-07

標籤構建 vue2 vue router vuex 開發環境入門實現基本登陸退出功能简体版

原文原文鏈接

前言#css

vue2正式版已經發布將近一個月了，
國慶事後就用在了公司的兩個正式項目上，
還有一個項目下個月也會採用vue2進行重構
選擇它沒什麼理由，若是非要說一個理由
那就是它的中文文檔遠比react，angularjs要友好
github:https://github.com/lzxb/vue2-...
源碼說明#html

項目目錄說明#vue

webpack相關模塊#react

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相關模塊#webpack

gulp // 用來構建自動化工做流
gulp-sftp // 將代碼自動部署到服務器上
del // 代碼部署成功後，刪除本地編譯的代碼
其餘模塊#git

cross-env // 解決跨平臺設置NODE_ENV的問題
生產模塊依賴說明#angularjs

vue全家桶#github

vue // 構建用戶界面的
vue-router // 路由
vuex // 組件狀態管理
頁面說明#web

/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>

</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 將代碼打包到正式服務器

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。