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

Source: Internet
Author: User

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/

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.