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