Are you hungry?-VUR2.0 Implementation Summary one (project creation and document structure)

I. Project creation (Ubuntu17.04 system)

The prerequisite is the installation of the Vue.js environment, has been installed globally:

$ NPM install-g cnpm--registry=http://registry.npm.taobao.org (install CNPM, check URLs to prevent spelling mistakes ...) )

$ cnnpm install-g vue-cli (This step installs the Vue-cli tool, $vue a command appears stating that the installation was successful)

Start creating the project now:

$ vue init Webpack Sell (project initialization based on Webpack packaging mode, project name: Sell)

$ CD Sell (enter project directory)

One-click Download Project dependencies:

$ sudo cnpm install (or $ sudo npm install)----------The project directory will have more Node_modules folders, storing the files that the project relies on

You can now run an empty project;

$ npm Run Dev (this dev is a project under the Package.json file already written in the fast running name Dev)

Project directory:

Build and Config:webpack the location of the packaged files. Webpack.dev.conf.js is the main modification of the file, build configured the basic configuration of Webpack, development environment configuration, production environment configuration.

Node_modules: Project-dependent packages, including NPM install * * * come in here.

Resource: Store only resources, including pictures, etc.

SRC: sources, storing their own written files (components) and automatically generated App.vue and Main.js and router folders

(Their new common store commonly used styles, fonts, functions, etc., components put their own written components, each component of a separate folder, because the components will use the picture and other resources are best to find nearby, Eg:header, good, ratings and other components, References are introduced with relative paths and then registered (components:{introduced component names})

Static to put a number of statically files, the following is the configuration item: Data.json is the data that you import, put the JSON data used in the project

，

1.main.js is our portal file, the main role is to initialize the Vue instance and use the required Plug-ins.

/* Eslint-disable no-new/is the ES6 syntax, ignore the Vue instantiation of the time assigned to the value (variable), so to separate a rule, to the new Vue this line of code add this comment, the line of code rules to skip the checksum.

Import Vue from ' Vue ';
Import App from './app ';
Import router from './router ';
Import Vueresource from '. /node_modules/vue-resource ';
Import './common/stylus/base.styl '; Style Introducing stylus Style
Import ' Font-awesome/css/font-awesome.css '; Introduce icon font font-awesome, the following can be used directly in the build

2.app.vue is our main component, all pages are switched under App.vue. In fact, you can also understand that all routes are also App.vue subassemblies. So router is labeled as a App.vue subassembly.

To set up the route here: Data sources are introduced in seller:

Seller is a custom variable within the webpack.dev.conf.js that is used to pass data to the subassembly. Seller introduces the data inside the Data.json (12-18 lines):

The access localhost:8080/api/goods can now see goods-related JSON data.

3.index.html is a portal file that does not introduce files and automatically inserts files at compile time

PS:data.json Data Eg:seller.name, Seller.support[0].type

Summed up in the summer of 2017.12.13 wind-refueling.