Use vue to develop an app (results of 3 or 3 days) and vueapp

Use vue to develop an app (results of 3 or 3 days) and vueapp
Preface

A vue demo

Source code description project directory description

. | -- Config // configure the Project Development Environment | -- index. js // package deployment configuration of the Project | -- src // source code directory | -- components // public component | -- header. vue // public component of the page header | -- footer. vue // public component at the end of the page | -- index. js // load various public components | -- config // route configuration and BASIC Program Information Configuration | -- routes. js // configure page routing | -- css // various css files | -- common.css // global general css files | -- iconfont // various font icons | -- images // public Image | -- less // various less files | -- common. less // global general less file | -- pages // page components | -- home // personal center | -- index // website homepage | -- login // login | -- signout // exit | -- store // vuex status management | -- index. js // load various store modules | -- user. js // user store | -- template // various html files | -- index.html // html file of the program entry | -- util // public js method, mixin mixing of vue | -- app. vue // page entry file | -- main. js // program entry file, loading various public components | --. babelrc // ES6 syntax compilation Configuration | -- gulpfile. js // start, package, deploy, and automatically build | -- webpack. config. js // program packaging Configuration | -- server. js // Proxy Server Configuration | -- README. md // project description | -- package. json // configure the project information. Run the npm init command to create the project.

Development Environment dependency module description webpack related modules

Webpack // used to build the package webpack-dev-server // In the development environment, set the Proxy Server html-webpack-plugin // html file compilation url-loader // convert the image to base64 format file-loader // pack the font file css-loader // css to generate less // css pre-processor lessless-loader // css pre-processor less webpack plugin style-loader // css insert into style tag autoprefixer-loader // handle babel browser compatibility issues- core // ES6 Code Converter babel-loader // ES6 Code Converter, webpack plugin babel-plugin-transform-object-assign // ES6 Object. the assign Method is compatible with the processing babel-preset-es2015 // ES6 code compiled into the current browser-supported ES5babel-preset-stage-0 // ES6 ES7 to be used in the syntax phase vue-loader // The vue component compiled babel-helper-vue- jsx-merge-props // vue jsx syntax compile babel-plugin-syntax-jsx // vue jsx syntax compile babel-plugin-transform-vue-jsx // vue jsx syntax compile

Gulp-related modules

Gulp // used to build an automated workflow gulp-sftp // automatically deploy the code on the server del // After the code is successfully deployed, delete the locally compiled code

Other modules

Cross-env // solve the problem of setting NODE_ENV across platforms

Production module dependency description vue Bucket

Vue // build vue-router on the user interface // route vuex // component Status Management

Page Description

/Login // log on. You do not need to log on to/signout // and log out. You need to log on to/home // personal center, you can access the // homepage only after logging on. You can access the Homepage without logging on * // forcibly jump to the logon page.

Run the program

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