APP-webpack环境配置及目录结构设计

╰半夏微凉° 2022-01-06 01:53 252阅读 0赞

1、 安装nodejs，检验是否安装成功命令：node –v 查看node版本 npm -v 查看包管理器版本

2、 配置npm镜像，命令如下：

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/][http_w3cloudnkg-sit1.huawei.com_ccloud_nexus_content_groups_npm-all]

3、 全局安装webpack，命令：npm install –g webpack。因为打包编译需要使用webpack命令。

4、 将webpack配置文件copy到项目根目录，然后执行命令：npm install。Npm会自动安装配置文件中指定的所有依赖插件。

5、 运行命令 npm run buildDebug 进行编译打包，会在根目录生成产出目录build

6、 配置Webstorm支持es6语法，步骤如下：

A、

B、

7、 配置webstorm支持vue文件及语法高亮，步骤如下：

A、

B、选择vuejs-plugin.zip，

C、settings》editor》fileTypes，选择html添加\*.vue

使用过程中的问题：

1、 Webstorm启动本地服务器调试页面时，提示如下错误：

解决方法：勾上下图所示选项

2、 babel-loader的使用注意：

配置loader：

/\*将es6语法转换成es5语法\*/

\{

test: /\\.js$/,

loader: 'babel-loader?\{"presets":\["es2015"\]\}',

exclude: /node\_modules/,

\}

同时还要在项目根目录下新建.babelrc文件，文件内容为：

\{

"presets":\["es2015"\]

\}

App目录结构设计

app\_v1.0 根目录

build 构建产出目录

assets 资源文件目录

images 图片资源文件夹

pages 页面根目录

common 公共样式和js文件

其他文件夹是各个页面，文件夹里面就是这个页面所需的资源（css、js、html）

src 源码目录

common 公共资源

css 样式文件

lib 第三方类库

tool 工具文件

config 配置文件目录

common.js 公共js文件

components 组件文件夹

filters 过滤器文件夹

images 图片资源文件夹

pages 页面文件夹

index 首页目录（这个目录下除了入口js文件外，最好不要有其他的js文件）

index.js

index.css

index.html

dataService 数据服务目录

dataService.js 首页获取数据服务的公共文件

子文件夹 是不同的页面，子文件夹里面包含该页面所需的资源（css、js、html）

目录：src-pages下的子文件夹的名称必须要和该子文件夹下页面的入口js文件的名称一致，示例如下：

转载于:https://www.cnblogs.com/rechel/p/9006628.html

[http_w3cloudnkg-sit1.huawei.com_ccloud_nexus_content_groups_npm-all]: http://w3cloudnkg-sit1.huawei.com/ccloud/nexus/content/groups/npm-all/

发表评论取消回复

表情：

评论列表（有 0 条评论，252人围观）

还没有评论，来说两句吧...

相关阅读

相关 java 包目录结构_Java目录结构及工具包

Java(TM) 有两个平台 JRE 运行平台，包括Java虚拟机，运行类库，java应用程序装载器。 JRE不是开发环境，所以不包括编译器，调试器，有需要这些请安装JDK(

刺骨的言语ヽ痛彻心扉/ 2022年11月02日 11:50/ 0 赞/ 193 阅读

相关在vs2010配置及删除opencv的环境目录

原文章地址：/images/20220810/f8511680a21d4755a8edb6612736b3e3.png 之前在vs2010中配置的是 opencv2.3.1

系统管理员/ 2022年08月13日 13:35/ 0 赞/ 190 阅读

相关 tomcat目录结构及配置文件说明

安装包 tar.gz文件时Linux操作系统下的安装版本 exe文件时Windows系统下的安装版本 zip文件是Windows系

不念不忘少年蓝@/ 2022年07月15日 11:15/ 0 赞/ 262 阅读

相关 tomcat目录结构及配置文件说明

安装包 tar.gz文件时Linux操作系统下的安装版本 exe文件时Windows系统下的安装版本 zip文件是Windows系

骑猪看日落/ 2022年07月15日 11:15/ 0 赞/ 282 阅读

相关 Django 工程目录结构设计

概述最近在做阿里云市场API产品，我们使用Django做后端服务，由于产品较多，后端工程管理需要有较为科学的管理，发现多数Django工程非常混乱，不幸的是默认的Djang

傷城~/ 2022年04月25日 03:48/ 0 赞/ 235 阅读

相关 ThinkPHP基础：目录介绍及环境配置

目录结构： <table> <thead> <tr> <th>关键的路径</th> <th>目录</th> <th>说明</th> <

我会带着你远行/ 2022年02月28日 02:50/ 0 赞/ 597 阅读

相关 SpringBoot目录结构配置

[项目地址][Link 1] > 目前属于目录搭建初级阶段，其中如下目录还没有具体实现功能分化： > > 1. dao > 2. serviceimpl 先上图

系统管理员/ 2022年01月28日 04:53/ 0 赞/ 243 阅读

相关 SpringMVC目录结构配置

先上图： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

墨蓝/ 2022年01月28日 04:25/ 0 赞/ 232 阅读

相关 APP-webpack环境配置及目录结构设计

1、安装nodejs，检验是否安装成功命令：node –v 查看node版本 npm -v 查看包管理器版本 2、配置npm镜像，命令如下： npm config rm

╰半夏微凉°/ 2022年01月06日 01:53/ 0 赞/ 253 阅读

相关 Linux目录结构及用途

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

r囧r小猫/ 2021年09月17日 00:26/ 0 赞/ 369 阅读