# webpackTest

**Repository Path**: miaopanpan/webpackTest

## Basic Information

- **Project Name**: webpackTest
- **Description**: 用webpack搭建第一个VUE项目

- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-03-07
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webpackTest

#### 介绍
用webpack搭建第一个VUE项目


#### 软件架构
软件架构说明


#### 安装教程

##### 1. 首先初始化npm
  > npm init -y
##### 2. 安装webpack webpack-cli
  > npm install webpack webpack-cli --save-dev
##### 3. package.json,更改script
  + 代码如下
  ``` 
  "scripts": {
    "dev": "webpack-dev-server --hot --config ./build/dev.js",
    "build": "webpack --config ./build/pro.js"
  }
  ```  
  + 新建目录build，目录下子文件
    > 3.2.1 dev.js(开发环境)
      ``` 
      devServer: {
        contentBase: './dist'
      } 
      ```
    > 3.2.3 pro.js(生产环境)
      ` 
      mode: 'production' 
      `
##### 4. 安装vue-loader vue-template-compiler
  > npm inatsll vue-loader vue-template-compiler --save-dev
  ``` 
  {
    test: /\.vue$/,
    loader: 'vue-loader' 
  } 
  ```
##### 5. 安装css-loader sass-loader css-loader style-loader
  > npm inatsll node-sass sass-loader css-loader style-loader --save-dev
  ``` 
  {
    test: /\.css$/,
    use: ['vue-style-loader', 'css-loader']
  },
  {
    test: /\.sass$/,
    use: ['vue-style-loader', 'css-loader', { // sass 要传一个 缩进 的配置参数，所以第三个元素用对象的形式，如果对缩进没要求，直接用 'sass' 就可以
      loader: 'sass-loader',
      options: {
        indentedSyntax: true
      }
    }]
  } 
  ``` 
##### 6. 安装babel-loader @babel/preset-env(插件集合) @babel/polyfill @babel/core (用来转译es6语法)
  > npm inatsll babel-loader @babel/preset-env @babel/polyfill @babel/core --save-dev
  ``` 
  {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/, // node_modules/ 下的文件不转译
  } 
  ```
##### 7. 安装webpack-dev-server(用于页面和程序同步刷新)
  > npm install webpack-dev-server --save-dev
    回到第三条看一下，运行的时候webpack-dev-server --hot
##### 8. 安装VUE(默认最新稳定版本)
  > npm install vue

#### 目录分配

1. 新建一个src用来放源码，src下面新建一个index.js(默认入口)
2. 新建一个.gitignore，用来排除不需要上传git的文件
  比如不上传node_modules，就写成/node_modules/
3. src下面新建style、component、unit文件夹，分别用于放置sass文件，组件，公用方法
4. 新建一个dist文件夹,dist下面新建一个index.html,src下面新建一个app.vue


#### 遇到的问题

##### 1. v-for报错
  + 原因：
    vscode编写vue代码时，因为安装的有vetur插件，所以当代码中有v-for语法时，会提示，“Elements in iteration expect to have 'v-bind:key' directives.”这个错误
  + 解决方案：
    更改vetur配置; vscode->preference->settings->搜索（vetur）; 把  "vetur.validation.template": true  改成  false
##### 2. [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available
  + 原因：
    package.json 中的 main 属性决定了，当项目被引入时，输出的是哪个文件，而 vue 的 package.json 中的 main 指向的是 dist/vue.common.js。
  + 解决方案：
    可以把import vue from 'vue'换成import vue from 'vue/dist/vue.js'，但是每次这样引用太麻烦了，所以congfig.js增加如下代码(dev.js,pro.js)：
    ``` 
    resolve: {
		  alias: {
				'vue': 'vue/dist/vue.js'
		  }
    }
    ```
##### 3. xxxx

#### vue路由配置

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request