前言
vue2 正式版已經發布將近一個月了， 國慶事後就用在了公司的兩個正式項目上， 還有一個項目下個月也會採用 vue2 進行重構 選擇它沒什麼理由，若是非要說一個理由 那就是它的中文文檔遠比 react ， angularjs 要友好
github:https://github.com/lzxb/vue2-demojavascript
源碼說明
項目目錄說明
.
|-- 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 相關模塊css
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 相關模塊html
gulp // 用來構建自動化工做流 gulp-sftp // 將代碼自動部署到服務器上 del // 代碼部署成功後，刪除本地編譯的代碼
其餘模塊vue
cross-env // 解決跨平臺設置 NODE_ENV 的問題
生產模塊依賴說明
vue 全家桶java
vue // 構建用戶界面的 vue-router // 路由 vuex // 組件狀態管理
頁面說明
/login // 登陸，不須要登陸能夠訪問 /signout // 退出登陸，須要登陸後才能夠訪問 /home // 我的中心，須要登陸後才能夠訪問 / // 首頁，不須要登陸能夠訪問 * // 強制跳轉到登陸頁面
運行程序
npm install
npm run dev
http://localhost:3000/app/
開發教程
1.安裝開發環境
vs code https://code.visualstudio.comnode
開發時所用的編輯器，內置了終端，開發時使它執行命令運行程序
Node.js https://nodejs.orgreact
JS 服務器端的運行環境，內置 npm 包管理器，管理項目依賴的各類模塊，編譯代碼，自動部署到服務器就全靠他了
2.安裝全局模塊
webpackwebpack
npm install -g webpack
webpack 是一款模塊加載器兼打包工具，它能把各類資源，例如 JS （含 JSX ）、 coffee 、樣式（含 less/sass ）、圖片等都做爲模塊來使用和處理nginx
gulpgit
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 將代碼打包到正式服務器