# vue-we码版

**Repository Path**: ipop/vue_we_code

## Basic Information

- **Project Name**: vue-we码版
- **Description**: we码 VUE的模板，可使用vue全家桶，还有各种UI组件，模板使用了Muse UI组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2018-11-02
- **Last Updated**: 2022-06-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# we-helloworld-template
-----------------------------

  此框架支持ES6语法转ES5和热更新，方便开发，提高开发效率。

## 开发环境

  node 版本6.5以上

## 开始

+ 安装相关依赖包

  ```bash
  $ npm install
  ```

+ 启动项目

  ```bash
  $ npm start
  ```
  将自动打开谷歌浏览器，并自动访问谷歌浏览器，访问地址：
  http://dev.huawei.com:3000/apps/welink.demo/1/html/index.html

+ 配置项目入口文件，以首页入口为例子：

  在项目根目录的 entries.config.js 中，添加配置，如：

  ```
  module.exports = {
    'vendor': ['./src/js/lib/common.js'],
    'index': './src/js/index.js',
    'list': './src/js/page.js'
  };
  ```

  其中 vendor 是公用文件配置地址，可以配置多个文件。

  首页入口文件为`./src/js/index.js`，这里需要注意，在
`./src/html` 文件夹里，需要对应有index.html。按照此规则，index.html文件将自动引用 `./src/js/index.js` 文件， 页面无需手动引用。

+ 构建项目

  uat环境包
  ```bash
  $ npm run build -- uat
  ```
  生产包
  ```bash
  $ npm run build -- prod
  ```


## 使用说明

  #### 项目目录结构

  ```text
  |—— build
  │   ├── common // jsapi文件目录
  │   └── apps   // 打包生成的app目录
  |—— config
  │   └── server.config.js // 开发环境设置，可修项目名称、端口号等
  ├── src // 源代码目录
  │   ├── assets // 静态资源
  │   ├── css // 样式文件
  │   ├── html // html文件
  │   └── js // js文件包含入口文件  
  ├── tools // 打包相关 
  ├── .eslintrc // eslint配置文件  
  ├── entries.config.js // webpack入口文件配置
  ├── package.json // node相关环境的配置文件
  ├── plugin.json // 构建配置文件
  └── webpack.config.js // webpack配置文件

  ```

#### 配置本地代理服务

##### 使用chorme配置代理（推荐），右键 Chrome 应用图标，点击属性，在“目标”最后增加 --disable-web-security --user-data-dir 配置。

## public文件夹的使用

### `引入外部资源`

你可以通过`public` 文件夹引入其他模块代码。

注意，我们通常鼓励您使用JavaScript文件中的`import`引入。
这种机制提供了许多好处:

* 脚本和样式表被压缩并打包在一起，以避免额外的网络请求。
* 丢失的文件会导致编译错误，而不是为您的用户造成404错误。

如果你将一个文件放入 `public` 文件夹，它将不会被Webpack处理。相反，它将被复制到build文件夹的项目根目录下。

在 `index.html` 里面，你可以这也使用：

```html
<link rel="shortcut icon" href="../favicon.ico">
```

当你执行 `npm run build`，模板将会替换正确的路径。

请记住这种方法的缺点:

* `public` 文件夹内的所有文件都不会被处理或压缩。
* 在编译时将不会因为丢失的文件或js语法问题，而提示错误。

### 什么时候适合使用public文件夹

`public`文件夹对于一些不太常见的情况是有用的:

* 您有数千个图像，需要动态地引用它们的路径。
* 你想要引入一段小的脚本比如[`pack.js`]而不经过webpack打包编译。
* 有些库可能与Webpack不兼容，您没有其他选择，只能将它通过`<script>`标签引入。