Zero-Start Vue Project Combat (iii)-Project structure

Now enter http://localhost:8083 in the browser, you can see the original "Welcome to Your vue.js App" page

Directory Structure ├──README.MD Project Introduction ├──index.html portal page ├──build build script directory │├──build-server.js Run the local build server to access the built-in page │├──build.js production environment build script │├──dev-client.js Development Server Hot Reload script, mainly used to implement the development phase of the page automatically refreshed │├─  ─dev-server.js running the on-premises development Server │├──utils.js building the related tools method │├──webpack.base.conf.js wabpack Basic Configuration │├── Webpack.dev.conf.js wabpack Development Environment Configuration │└──webpack.prod.conf.js wabpack Production environment Configuration ├──config project configuration │├──           Dev.env.js Development environment variable │├──index.js project configuration file │├──prod.env.js production environment variable │└──test.env.js               Test environment variable ├──mock mock data directory │└──hello.js├──package.json NPM package configuration file, which defines the project NPM script, dependency package and other information ├──src   SOURCE Directory │├──main.js Portal JS file │├──app.vue root component │├──components Common components directory │             │└──title.vue│├──assets Resource Directory, where the resources will be wabpack built ││└──images││└──logo.png│├──routes Front-end Routing ││└──index.js│├──store Application-level data (state) ││└──index.js│└──views the page directory │├──homepage. Vue│└──notfound.vue├──static Pure static resources, will not be built by Wabpack. └──test test file directory (UNIT&E2E) └──unit Unit Test ├──index.js Portal Script ├──karma.co Nf.js Karma configuration File └──specs single case directory └──hello.spec.js

　　

Temporarily create three files in the Views folder Homepage.vue and Notfound.vue, as the first page and 404 pages

To quickly build a project and learn key knowledge, introduce Mint-ui as the UI framework

NPM I Mint-ui-s

Write the following in Main.js:

Import vue from ' Vue ' import mintui from ' mint-ui ' import ' mint-ui/lib/style.css ' import apps from './app.vue ' Vue.use (mintui )

　　

Add 3 new components to Header-bar,

Zero-Start Vue Project Combat (iii)-Project structure