App-webpack environment Configuration and directory structure design

1, install Nodejs, check whether the installation Success command: NODE–V View node version npm-v View Package Manager version

2, configure the NPM image, the command is as follows:

NPM Config RM proxy
NPM Config RM http-proxy
NPM Config RM https-proxy
NPM config set no-proxy. huawei.com
NPM Config Set Registry http://w3cloudnkg-sit1.huawei.com/ccloud/nexus/content/groups/npm-all/

3, Global installation Webpack, command: Npminstall–g webpack. Because the Webpack command is required for package compilation.

4. Copy the Webpack configuration file to the project root directory and execute the command: NPM install. NPM automatically installs all dependent plug-ins specified in the configuration file.

5, run the command npm Runbuilddebug to compile the package, will generate the output directory build in the root directory

6, configuration Webstorm support ES6 syntax, the steps are as follows:

A

B

7, configuration webstorm support vue file and syntax highlighting, the steps are as follows:

A

B, choose Vuejs-plugin.zip,

C, Settings "Editor" filetypes, choose HTML Add *.vue

Problems in the use process:

1, webstorm start the local server Debugging page, the following error is prompted:

WORKAROUND: Tick the options shown

2, the use of Babel-loader Note:

Configuration loader:

/* Convert ES6 syntax to ES5 syntax */

{

Test:/\.js$/,

Loader: ' Babel-loader? {"Presets": ["es2015"]} ',

Exclude:/node_modules/,

}

Also create a new. babelrc file in the project root directory with the following file contents:

{

"Presets": ["es2015"]

}

App directory structure design

app_v1.0 root directory

Build builds the output directory

Assets Resource File Directory

Images Picture Resource Folder

Pages root directory

Common common styles and JS files

The other folder is the individual pages, the folder inside is the resources required for this page (CSS, JS, html)

SRC Source Directory

Common public resources

CSS style files

Lib Third party class library

Tool Tools File

Config configuration file directory

Common.js Public JS File

Components folder

Filters Filter Folder

Images Picture Resource Folder

Pages Pages folder

Index home directory (this directory in addition to the entry JS file, it is best not to have other JS files)

Index.js

Index.css

Index.html

DataService Data Service Catalog

Dataservice.js Home Get the public file for the data service

Subfolders are different pages, and subfolders contain the resources required for the page (CSS, JS, html)

Directory: The name of the subfolder under Src-pages must be the same as the name of the portal JS file for the page under the subfolder, as shown in the following example:

App-webpack environment Configuration and directory structure design