Develop an app with Vue (3, three days of results)

Objective

一个vue的demo

Source Code Description Project Directory Description

.| --Config//Project development environment Configuration| |--Index.js//Project Package Deployment Configuration|--SRC//Source directory| |--components//Common components| |--Header.vue//Page Header common components| |--Footer.vue//Footer head Common components| |--Index.js//load various common components| |--Config//Routing configuration and basic information configuration of the program| |--Routes.js//Configure page Routing| |--CSS//Various CSS files| |--Common.css//Global Universal CSS File| |--Iconfont//Various font icons| |--Images//Public pictures| |--Less//Various less files| |--common.less//Global generic less file| |--pages//Page Components| |--Home//Personal Center| |--Index//website Home| |--Login//Login| |--SignOut//Exit| |--Store//Vuex state management| |--Index.js//load various store modules| |--User.js//user store| |--Template                     //Various HTML files| |--index.html//Program entry HTML file| |--util//Public JS method, Vue's Mixin mix| |--App.vue//Page entry file| |--Main.js//Program entry file, load various common components|--. BABELRC//ES6 Syntax compilation configuration|--Gulpfile.js//Start, package, deploy, build automatically|--Webpack.config.js//Program Packaging configuration|--Server.js//Proxy server configuration|--readme.md//Project Description|-- Package. JSON//configuration item related information, created by executing NPM init command.

Development environment Dependent module Description Webpack related modules

Webpack//used to build a wrapperWebpack-dev-server//development environment, set up a proxy serverHtml-webpack-plugin//HTML file compilationUrl-loader//images into base64 formatFile-loader//font to package font filesCss-loader//CSS GenerationLess//CSS preprocessor lessLess-loader//CSS preprocessor less webpack pluginStyle-loader//CSS Insert to Style tabAutoprefixer-loader//CSS Browser compatibility issue handlingBabel-core//ES6 code convertersBabel-loader//ES6 code Converter, Webpack plug-inbabel-plugin-transform-Object-assign//ES6 Object.assign method to do compatible processingbabel-preset-es2015//ES6 code compiled into browser-supported ES5 nowBabel-preset-stage-0                  //ES6 ES7 The syntax stage to useVue-loader//Vue component compilationBabel-helper-vue-jsx-merge-props//Vue JSX Syntax compilationBabel-plugin-syntax-jsx//Vue JSX Syntax compilationBabel-plugin-transform-vue-jsx//Vue JSX Syntax compilation

Gulp related Modules

gulp                                  // 用来构建自动化工作流gulp-sftp                             // 将代码自动部署到服务器上del                                   // 代码部署成功后，删除本地编译的代码

Other modules

cross-env                             // 解决跨平台设置NODE_ENV的问题

Production module Dependency Description Vue family barrels

vue                                   // 构建用户界面的vue-router                            // 路由vuex                                  // 组件状态管理

Page description

/login                                // 登录，不需要登录可以访问/signout                              // 退出登录，需要登录后才可以访问/home                                 // 个人中心，需要登录后才可以访问/                                     // 首页，不需要登录可以访问*                                     // 强制跳转到登录页面

Run the program

npm installnpm run devhttp://localhost:3000/app/

Develop an app with Vue (3, three days of results)