項目目錄說明
.
|-- 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/