vue组件化开发初体验-示例vue-loader-example学习记录

叁歲伎倆 2022-06-17 00:29 72阅读 0赞

## 目录结构 ##

- demo/
      + package.json //npm配置文件
      + webpack.config.js //webpack配置
      + index.html //页面
      - node_modules //npm加载的模块
      - src //开发资源目录
        - assets //一些资源
          + logo.png  //图片资源
        - components //vue组件
          + a.vue 
          + b.vue
          + counter.vue
        + app.vue //布局文件
        + main.js  //入口文件

## 初始化npm ##

1.生成npm配置文件 package.json

npm init

2.可以粘贴如下配置内容替换到package.json中，或者根据变动进行修改

{
      "name": "demo_vue-loader-example",
      "version": "1.0.0",
      "description": "demo",
      "main": "index.js",
      "scripts": {
        "dev": "webpack-dev-server --inline --hot --quiet", 
        "build": "set NODE_ENV=production && webpack --progress --hide-modules"
      },
      "author": "Solin",
      "license": "MIT",
      "devDependencies": {
        "babel-core": "^6.2.1",
        "babel-loader": "^6.2.0",
        "babel-plugin-transform-runtime": "^6.1.18",
        "babel-preset-es2015": "^6.1.18",
        "babel-preset-stage-0": "^6.1.18",
        "babel-runtime": "^6.2.0",
        
        "css-loader": "^0.23.0",
        "node-sass": "^3.4.2",
        "sass-loader": "^3.1.2",
        "style-loader": "^0.13.0",
        "stylus-loader": "^1.4.2",
        
        "file-loader": "^0.8.5",
        "jade": "^1.11.0",
        "template-html-loader": "0.0.3",
        
        "vue-hot-reload-api": "^1.2.1",
        "vue-html-loader": "^1.0.0",
        "vue-loader": "^7.1.4",
        
        "webpack": "^1.12.9",
        "webpack-dev-server": "^1.14.0"
      },
      "dependencies": {
        "vue": "^1.0.10"
      }
    }

3.下载node模块

npm install

>  *  其实我是一条条用`npm i xxx --save-dev`敲的，没有在`package.json`里面的`"devDependencies":{}`手动添加内容，可以一个个装（也可以一起敲）如 `npm i webpack --save-dev`,`npm i vue --save`
>  *  `--save-dev` 把依赖名和版本要求放在了 `"devDependencies":{}`，
>  *  `--save` 放在了 `"dependencies":{}`
>  *  每敲一个下载完后可以看到`"devDependencies":{}`依赖内容的添加

## 新建index.html用于展示最终页面 ##

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Vue Webpack Example</title> </head> <body> <app></app> <script src="dist/build.js"></script> </body> </html>

## 新建webpack.config.js用于配置webpack ##

var webpack = require('webpack')
    
    module.exports = {
      entry: './src/main.js',
      output: {
        path: './dist',
        publicPath: 'dist/',
        filename: 'build.js'
      },
      module: {
        loaders: [
          {
            test: /\.vue$/,
            loader: 'vue'
          },
          {
            // edit this for additional asset file types
            test: /\.(png|jpg|gif)$/,
            loader: 'file?name=[name].[ext]?[hash]'
          }
        ]
      },
      // example: if you wish to apply custom babel options
      // instead of using vue-loader's default:
      babel: {
        presets: ['es2015', 'stage-0'],
        plugins: ['transform-runtime']
      }
    }
    
    if (process.env.NODE_ENV === 'production') {
      module.exports.plugins = [
        new webpack.DefinePlugin({
          'process.env': {
            NODE_ENV: '"production"'
          }
        }),
        new webpack.optimize.UglifyJsPlugin({
          compress: {
            warnings: false
          }
        }),
        new webpack.optimize.OccurenceOrderPlugin()
      ]
    } else {
      module.exports.devtool = '#source-map'
    }

## 新建src目录用于存放开发文件 ##

### 新建入口文件`main.js` ###

var Vue = require('vue')
    var App = require('./app.vue')
    
    new Vue({
      el: 'body',
      components: {
        app: App
      }
    })

### 新建组件布局文件`app.vue` ###

> 组件布局将在这里设置，`.vue文件将由vue-loader进行加载，.vue内同时包含html、css、js源码，使组件的独立，组件之间可以尽可能地解耦，便于开发维护`

<template lang="jade"> div img(class="logo", src="./assets/logo.png") h1 { {msg}} comp-a comp-b counter </template> <script> import CompA from './components/a.vue' import CompB from './components/b.vue' import Counter from './components/counter.vue' export default { data () { return { msg: 'Hello from vue-loader!' } }, components: { CompA, CompB, Counter } } </script>

### 新建components文件夹 ###

> 用于开发具体的子组件，均以`.vue`的后缀呈现

*  a.vue

*  b.vue

*  counter.vue

<template> <div> <h1>I am a Counter Component. Edit me in dev mode.</h1> <p>Current count: { {count}}</p> </div> </template> <script> export default { data () { return { count: 0 } }, ready () { this.handle = setInterval(() => { this.count++ }, 1000) }, destroyed () { clearInterval(this.handle) } } </script>

### 新建assets文件夹用于放一些资源 ###

此项目下有一张图

![Center][]

## 打包运行查看 ##

*  打包：

npm run build

![1npmrunbuild.gif_raw_true_5009630][]

*  运行

npm run dev

## ![2npmrundev.gif_raw_true_5009630][]    ##

*  查看

浏览器中访问 localhost:8080

![Center 1][]

## 小结 ##

经过通读官方文档和这个源码示例多少对vue有了更好的认识，不过还是得接下来多练习练习，加强熟悉度。

[Center]: /images/20220617/493fffba1b6e4d3f9a26dd6f55b8d1e5.png
[1npmrunbuild.gif_raw_true_5009630]: https://github.com/dingyiming/learn-Js-vuejs/blob/master/demos/demo-vue-loader-example/pics/1npmrunbuild.gif?raw=true&_=5009630
[2npmrundev.gif_raw_true_5009630]: https://github.com/dingyiming/learn-Js-vuejs/blob/master/demos/demo-vue-loader-example/pics/2npmrundev.gif?raw=true&_=5009630
[Center 1]: /images/20220617/0de351ada73f43b4ab8a54551c46c165.png