Vue之webpack和vue-cli

Posted huangyanpeng

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue之webpack和vue-cli相关的知识，希望对你有一定的参考价值。

 01-webpack介绍

官方文档：https://www.webpackjs.com/concepts/

    本质上，webpack 是一个现代 javascript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

# 全局下载webpack的3.12.0版本
npm install webpack@3.12.0 -g

# 查看版本
webpack -v

02-webpack的使用

# 把main.js 打包成 bundle.js
webpack ./main.js ./bundle.js
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app"></div>
    <!-- bundle.js是通过webpack编译打包输出的js文件 -->
    <script type="text/javascript" src="./bundle.js"></script>

    <!-- webpack  ./main.js   ./bundle.js -->

    <!-- 这种语法浏览器不兼容 -->
    <!-- <script type="text/javascript">
        import Vue from \'./vue.js\'
    </script>
    -->
</body>
</html>
module.html
// 声明入口的组件
var App = {
    template:`<div>我是入口组件</div>`
};

// 声明并导出
export var num = 2; //作为一整个对象的key抛出

// 声明在导出
var num2 = 4;
export {num2}

// 抛出一个函数
export function add(x,y) {
    return console.log(x+y);
}
// 先抛出
export default App;
App.js
// 整个程序的入口

// 引入第三方的库  es6Module模块导入方法
import Vue from \'./vue.js\'

//再导入
// import App from \'./App.js\'

// 对象的解构
// import {num,num2,add} from \'./App.js\'


import * as  object from \'./App.js\'
console.log(object);

// console.log(num);
// console.log(num2);
// add(3,5)

new Vue({
    el:"#app",
    data(){
        return {

        }
    },
    components:{
        App:object.default
    },
    template:`<App />`
});
main.js
// 引入第三方的库  es6Module模块导入方法
import Vue from \'./vue.js\'
new Vue({
   el:"#app",
   data(){
      return {

      }
   },
   components:{
      App:object.default
   },
   template:`<App />`
});

 

# 进入当前的根目录下，执行
npm init --yes

# 下载webpack为项目开发依赖
npm install webpack@3.12.0 -D

# 创建webpack.config.js
module.exports = {
    // entry 入口
    // output 出口
    entry:{
        main: \'./main.js\'
    },
    output:{
        filename: \'./bundle.js\'
    },
    // 在开发环境下，每次更改代码，都会重新进行编译
    watch: true,
}

# 直接执行 webpack 就可以了
webpack

# 或者在 package.json里配置
"scripts": {
    "dev": "webpack"
  },

# 在终端执行，也可以获得结果
npm run dev
{
  "name": "code",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1",
    "dev": "webpack"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.18.0",
    "vue": "^2.5.17"
  }
}
package.json
module.exports = {
    // entry 入口
    // output 出口
    entry:{
        main: \'./main.js\'
    },
    output:{
        filename: \'./bundle.js\'
    },
    // 在开发环境下，每次更改代码，都会重新进行编译
    watch: true,
}
webpack.config.js

 

 2.1 模块

    在模块化编程中，开发者将程序分解成离散功能块(discrete chunks of functionality)，并称之为模块。

    每个模块具有比完整程序更小的接触面，使得校验、调试、测试轻而易举。 精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。

    Node.js 从最一开始就支持模块化编程。然而，在 web，模块化的支持正缓慢到来。在 web 存在多种支持 JavaScript 模块化的工具，这些工具各有优势和限制。webpack 基于从这些系统获得的经验教训，并将模块的概念应用于项目中的任何文件。

2.2 什么是webpack模块

webpack 模块能够以各种方式表达它们的依赖关系。

03-webpack的配置修改

//自带nodejs环境  cmd规范
// module.exports = {}
// var a = require(\'./webpack.config.js\')


// 如果在项目中配置了webpack.config.js 那么在终端中直接输入webpack,默认识别webpack.config.js项目配置文件
module.exports = {
    // 入口
    entry:{
        "main":\'./main.js\'
    },
    // 出口
    output:{
        filename:\'./bundle.js\'
    },
    watch:true

}
webpack.dev.config.js
// 上线环境下
module.exports = {
    // 入口
    entry:{
        "main":\'./main.js\'
    },
    output:{
        filename:\'./bundle.js\'
    }

};
webpack.prod.config.js

开发环境：webpack.dev.config.js ，上线环境下：webpack.prod.config.js ，在 package.json 里配置：

{
  "name": "code",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \\"Error: no test specified\\" && exit 1",
    "dev": "webpack --config ./webpack.dev.config.js",
    "build": "webpack --config ./webpack.prod.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.18.0",
    "vue": "^2.5.17"
  }
}

04-css-loader介绍

// 导入css文件
import \'./main.css\'

# 下载 css-loader和style-loader
npm install css-loader -D;npm install style-loader -D

# 配置loader，在webapck.config.js中
module.exports = {
    // 入口
    entry:{
        "main":\'./main.js\'
    },
    // 出口
    output:{
        filename:\'./bundle.js\'
    },
    watch:true,
    // 模块中的loader
    module: {
        loaders:[
            {
                test: /\\.css$/,
                // 先识别css-loader 再识别style-loader
                loader: \'style-loader!css-loader\'
            }
        ]
    }
};

05-webpack插件-plugins

插件是 webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！插件目的在于解决loader无法实现的其他事。

5.1 剖析

webpack 插件是一个具有apply属性的 JavaScript 对象。apply属性会被webpack compiler调用，并且 compiler 对象可在整个编译生命周期访问。

5.2 用法

由于插件可以携带参数/选项，你必须在 webpack 配置中，向 plugins 属性传入 new 实例。根据你的 webpack 用法，这里有多种方式使用插件。

# 安装插件 html-webpack-plugin
npm install html-webpack-plugin -D

# 配置webpack.prod.config.js
var HtmlWebpackPlugin = require(\'html-webpack-plugin\');

// 插件
plugins:[
    new HtmlWebpackPlugin({
        template:\'./index.html\',//参照物
    })
]
// nodejs中内置模块path
var path = require(\'path\');

var HtmlWebpackPlugin = require(\'html-webpack-plugin\');
// html-webpack-plugin
// 如果在项目中配置了webpack.config.js 那么在终端中直接输入webpack,默认识别webpack.config.js项目配置文件
module.exports = {
    // 入口
    entry:{
        "main":\'./src/main.js\'
    },
    // 出口
    output:{
        //相对转绝对
        path:path.resolve(\'./dist\'),
        filename:\'./bundle.js\'
    },
    // 模块中的loader  loader加载器 它能对css、json png jpg mp3 mp4 es6的js代码
    module:{
        loaders:[
            {
                test:/\\.css$/,
                loader:\'style-loader!css-loader\'
            }
        ]
    },
    // 插件
    plugins:[
        new HtmlWebpackPlugin({
            template:\'./index.html\',//参照物
        })
    ]
};
webpack.config.js
npm install -g http-server

# 上线测试命令
hs -o -p 9999

06-webpack-dev-server介绍

# 下载 
npm install webpack-dev-server@2.9.0 -D

# 配置package.json
"scripts": {
  "dev": "webpack-dev-server  --open --hot --inline   --config  ./webpack.dev.config.js",
  "build": "webpack --config  ./webpack.prod.config.js"
}

# 执行完，代码更新时，会自动变化
npm run dev

 

{
  "name": "02-module_deep",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server  --open --hot --inline   --config  ./webpack.dev.config.js",
    "build": "webpack --config  ./webpack.prod.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "style-loader": "^0.23.1",
    "webpack": "^3.12.0",
    "webpack-dev-server": "^2.9.0"
  },
  "dependencies": {
    "vue": "^2.5.17"
  }
}
package.json

07-vue-loader和单页面组件的介绍

# 下载
npm install vue-loader@14.1.1 -D  vue-template-compiler@2.5.27 -D
// nodejs中内容模块
var path = require(\'path\');
var HtmlWebpackPlugin = require(\'html-webpack-plugin\');
// html-webpack-plugin
// 如果在项目中配置了webpack.config.js 那么在终端中直接输入webpack,默认识别webpack.config.js项目配置文件
module.exports = {
    // 入口
    entry:{
        "main":\'./src/main.js\'
    },
    // 出口
    output:{
        path:path.resolve(\'./dist\'),//相对转绝对
        filename:\'./bundle.js\'
    },
    // 模块中的loader  loader加载器 它能对css、json png jpg mp3 mp4 es6的js代码
    module:{
        loaders:[
            {
                test:/\\.css$/,
                loader:\'style-loader!css-loader\'
            },
            {
                test:/\\.vue$/,
                loader:\'vue-loader\'
            }
        ]
    },
    watch:true,
    // 插件
    plugins:[
        new HtmlWebpackPlugin({
            template:\'./index.html\',//参照物
        })
    ]
};
webpack.dev.config.js
<!--  组件结构 html
      业务逻辑 js
      组件样式 css
 -->
 <template>
     <!-- 一定是闭合标签 -->
     <div class="app">
    
         <h3>{{msg}}</h3>
         <ul>
             <li>1</li>
             <li>2</li>
             <li>3</li>
             <li>4</li>
             <li>5</li>
         </ul>
         <Header />
     </div>
     
 </template>
 <script>
 import Header from \'./Header.vue\'
     export default{
         data(){
             return {
                 msg:\'学习单页组件\'
             }
         },
         methods:{

         },
         computed:{

         },
        // 挂载
         components:{
             Header
         }
     }
 </script>
 <!-- scoped 它表示只对当前组件的样式起作用 -->
 <style scoped>
 /*全局的*/
 h3{
     color: yellow;
 }
 </style>
App.vue
<template>
    <div>
        
        <h3>{{att}}</h3>
    </div>
</template>

<script>
export default {

  name: \'Header\',

  data() {
    return {
        att:"alex"
    };
  },
};
</script>

<!-- scoped 它表示只对当前组件的样式起作用 -->
<style scoped>
h3{
    color: green;
}

</style>
Header.vue
 <!-- scoped 它表示只对当前组件的样式起作用 -->
 <style scoped>
 /*全局的*/
 h3{
     color: yellow;
 }
 </style>

08-前端脚手架 vue-cli

# 下载安装vue-cli
官网：https://cli.vuejs.org/zh/

# 下载，版本是3.x
npm install -g @vue/cli

# 检查版本
vue -V

# 下载旧版本2.x
npm install -g @vue/cli-init
# `vue init` 的运行效果将会跟 `vue-cli@2.x` 相同
vue init webpack my-project

Vue CLI 3 和旧版使用了相同的 vue 命令，所以 Vue CLI 2 (vue-cli) 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，你可以全局安装一个桥接工具。

# 此时电脑上既可以使用2.x和3.x版本的脚手架工具

# 关于vue-cli 2.x版本的脚手架工具-命令
vue init <模板> <项目名>

# 模板：
    webpack-simple  简单配置webpack模板
    webpack  复杂的webpack模块，单元测试、ESlint、热重载

# 1. 切换到指定的文件夹，执行，生成项目
vue init webpack-simple my-project

# Use sass ? No

# dependencies 当前项目依赖的模块，devDependcies 通过脚手架搭建之后必须要以来的包，开发环境依赖

# 2. 然后执行 npm install 安装所有依赖 
npm install 

# 3. 执行 
npm run dev

 

09-项目各目录文件详解

vue的生态圈vue-awesome  参考链接：https://segmentfault.com/p/1210000008583242/read?from=timeline

// main.js是整个项目的入口启动文件

// 导入npm下载的模块
import Vue from \'vue\'
// 导入自己编写的模块  
// 不同在于 如果是npm下载的 from \'名称\'  自己编写的模块  from \'路径引入\'
import App from \'./App.vue\'


// 1.引入全局的组件
import Header from \'./components/Common/Header.vue\'
// 2.注册全局组件
Vue.component(Header.name,Header);


new Vue({
  el: \'#app\',
  // DOM直接渲染  
  // appendChild()
  render: h => h(App)
});
main.js
<template>
  <!-- 组件的页面结构 -->
  <div id="app">
    <Header />
  <h3>{{msg}}</h3>  
    <div v-html = \'title\'></div>
    <ul>
      <!-- key绑定key的时候 如果数据中有id 就绑定id，没有id 绑定index -->
      <li v-for = \'(item,index) in datas\' :key = \'index\'>
        {{ item }}
      </li>
    </ul>

    <Home  :text = \'text\' @add = \'addHandler\'/>

  </div>
</template>

<script>
//导入
import Home from \'./components/Home/Home.vue\'

// 组件内部的业务逻辑
export default {
  name: \'app\',
  data () {
    return {
      msg: \'我们来学习vue-cli脚手架项目\',
      title:"<h3>alex</h3>",
      datas:[\'抽烟\',\'喝酒\',\'烫头\'],
      text:"我是父组件的内容"
    }
  },
  components:{
    Home
  },
  methods:{
    addHandler(data){
      console.log(data);
    }
  }
}
</script>

<style>
/*组件的样式*/
#app {
  font-family: \'Avenir\', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
App.vue

 

10-项目中使用vue的API

11-公共组件的创建和使用

// 1.引入全局的组件
import Header from \'./components/Common/Header.vue\'
// 2.注册全局组件
Vue.component(Header.name,Header);

12-vue-cli的webpack模板项目

# 1. 创建webpack模板的项目
vue init webpack my-project-webpack

# 2. 执行 
cd my-project-webpack

# 3. 运行
npm run dev 或者 npm run start

13-项目中集成插件vue-router

// 整个路由的配置文件

import Vue from \'vue\'
import VueRouter from \'vue-router\'
// alias   @
// /Users/majinju/Desktop/vue_lesson/代码/06-vue-cli脚手架的使用/02-webpack_project/src
import Home from \'@/components/Home/Home\'
import FreeCourse from \'@/components/FreeCourse/FreeCourse\'

// 让vue使用此插件
Vue.use(VueRouter);
// 相当于
// Vue.protoype.$router = VueRouter

var router = new VueRouter({
    routes:[
        {
            path:\'/\',
            name:\'Home\',
            component:Home
        },
        {
            path:\'/free\',
            name:\'FreeCourse\',
            component:FreeCourse
        }

    ]
});
export default router;
src/router/index.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from \'vue\'
import App from \'./App\'
import router from \'./router/index.js\'


Vue.config.productionTip = true;

/* eslint-disable no-new */
new Vue({
  el: \'#app\',
  router,
  components: { App },
  template: \'<App/>\'
});
src/main.js
<template>
  <div id="app">
    
    <router-link to = \'/\'>首页</router-link>
    <router-link to = \'/free\'>免费课程</router-link>

    <router-view /> 
  </div>
</template>

<script>


export default {
  name: \'App\'
}
</script>

<style>
#app {
  font-family: \'Avenir\', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
src/App.vue

 

# 下载 vue-router
npm install vue-router -S

npm run dev

# 1. 先在main.js 导入vue-router
index.js ---> import VueRouter from \'vue-router\'
main.js   ---> import router from \'./router/index.js\'

# 2.

 

以上是关于Vue之webpack和vue-cli的主要内容，如果未能解决你的问题，请参考以下文章

vue-cli+webpack+router+vuex---之vuex使用

vue-cli脚手架之webpack.text.conf.js

vue-cli脚手架之webpack.prod.conf.js

vue2入门之vue-cli

08Vue 之 vue-cli

Vue.js系列之项目搭建（vue2.0 + vue-cli + webpack ）