Vue2从0到1(一)：用webpack打包vue

Yujiaao 发布于2019-08-22 11:12 / 653人阅读

摘要：项目初始化安装分为全局安装和项目内安装配置文件项目入口文件输出编译后文件地址及文件名命令行里面执行命令即可看到编译后的文件安装学习再次执行命令可看到多了一个文件这个文件是根据模板生成的并自动引入打包生成的文件运行打包后的即可看到效果。

webpack-vue 0.项目初始化

cd "to/your/path" npm init

1.安装 webpack

分为全局安装和项目内安装

    npm install webpack -g
    npm install webpack --save-dev

2.配置webpack.config.js文件

     const path = require("path");

     module.exports = {
         entry: "./Script/main.js", //项目入口文件
         output:{                    //输出编译后文件地址及文件名
             path: path.resolve(__dirname, "dist"),
             filename: "js/bundle.js"
         }
     };

命令行里面执行 webpack 命令即可看到编译后的文件

3安装webpack-html-plugin

npm install html-webpack-plugin --save-dev

    const HtmlWebpackPlugin = require("html-webpack-plugin");
    ...
    plugins:[
        ...
        new HtmlWebpackPlugin({
            title:"react 学习",
            inject:"body",
            filename:"index.html",
            template:path.resolve(__dirname, "index.html")
        }),
        ...
    ]

再次执行webpack命令可看到多了一个index.html文件
这个文件是根据模板生成的并自动引入打包生成的js文件
运行打包后的index.html即可看到效果。

4.安装Vue

   npm install vue -save

修改main.js：

    import Vue from  "vue";

    var MainCtrl = new Vue({
        el:"#main",
        data:{
            message:"Hello world"
        }
    })

修改index.html:

   
      {{message}}

执行webpack打包运行index.html(打包的文件)报错，经查在webpack.config.js里面配置：

    ...
    resolve: { alias: { "vue": "vue/dist/vue.js" } }

再次运行即可看到效果

5.安装webpack-dev-server热更新

    npm install webpack-dev-server -g
    npm install webpack-dev-server --save-dev
    npm install vue-hot-reload-api --save-dev

配置webpack.config.js

    ...
    devServer: {
        historyApiFallback: true,
    },
    ...

配置package.json里面命令

    "start":"webpack-dev-server --hot --inline --progress --open"

执行 npm start 浏览器自动打开页面，更改文件后即可看到页面实时更新

6.安装babel

在使用.vue文件之前先要安装babel(将es6语法转化为es5)

    npm install babel-core babel-loader babel-plugin-transform-runtime --save-dev 
    npm install babel-preset-stage-0 babel-runtime babel-preset-es2015 --save-dev

项目根目录新建.babelrc文件、配置：

    {
    "presets": ["es2015", "stage-0"],
    "plugins": ["transform-runtime"]
    }

7.安装vue-loader处理.vue的文件

安装loader 处理.css,.vue文件

npm install css-loader style-loader vue-loader vue-html-loader --save-dev

配置webpack.config.js

   ...
   module:{
       loaders: [
           {test: /.js$/,loader: "babel-loader",exclude: /node_modules/},
           {test: /.vue$/,loader: "vue-loader"}]
        },
    //vue: {loaders: {js: "babel"}}
   ...

配置完运行报错：Cannot find module "vue-template-compiler"
安装vue-template-compiler

cnpm install vue-template-compiler --save-dev

修改index.html:

新建src/index.vue:

修改main.js

    ...
    import App from "./src/index.vue";

    new Vue({
        el: "#main",
        components: { App }
    })

保存后运行 npm start 即可看到效果

修改代码，即可看到更新后的效果

后面将持续更新vue-router，vuex的内容。代码托管在github上欢迎star

云服务器 GPU云服务器 vue2.0 cdn 从0到1搭建视频通话系统从0开始到1千万用户 Vue2x

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91981.html

无痛学会各种 2 的 Vue2+Vuex2+Webpack2 前后端同构渲染

摘要：它会检测出最大静态子树就是不需要动态性的子树并且从渲染函数中萃取出来。这样在每次重渲染的时候，它就会直接重用完全相同的同时跳过比对。需要注意的是，中的操作必须是同步的，不可以存在异步操作的情况。新增：哈哈，最近又推出了 vue 的文章，在这里放个链接~手把手教你从零写一个简单的 VUE 感谢有人看我扯技术，这篇文章主要介绍最近非常火的vue2前端框架的特点和vue2+vuex2+we...

fish 2019-08-29 11:27 评论0 收藏0
无痛学会各种 2 的 Vue2+Vuex2+Webpack2 前后端同构渲染

摘要：它会检测出最大静态子树就是不需要动态性的子树并且从渲染函数中萃取出来。这样在每次重渲染的时候，它就会直接重用完全相同的同时跳过比对。需要注意的是，中的操作必须是同步的，不可以存在异步操作的情况。新增：哈哈，最近又推出了 vue 的文章，在这里放个链接~手把手教你从零写一个简单的 VUE 感谢有人看我扯技术，这篇文章主要介绍最近非常火的vue2前端框架的特点和vue2+vuex2+we...

30e8336b8229 2019-08-22 10:40 评论0 收藏0
无痛学会各种 2 的 Vue2+Vuex2+Webpack2 前后端同构渲染

摘要：它会检测出最大静态子树就是不需要动态性的子树并且从渲染函数中萃取出来。这样在每次重渲染的时候，它就会直接重用完全相同的同时跳过比对。需要注意的是，中的操作必须是同步的，不可以存在异步操作的情况。新增：哈哈，最近又推出了 vue 的文章，在这里放个链接~手把手教你从零写一个简单的 VUE 感谢有人看我扯技术，这篇文章主要介绍最近非常火的vue2前端框架的特点和vue2+vuex2+we...

Pluser 2019-08-01 15:52 评论0 收藏0
Vue2学习之旅一：初始化项目搭建（不带路由）

摘要：除此之外，你还可以运行打包命令此时之前说的打包生成的文件应该就生成了，或者选择用浏览器打开应该也可以看见和刚刚一样的结果。而如何创建一个对象是知道，因此开头引入了，并使用它常见了一个对象，然后这个对象就管理了这一块区域。作者：心叶时间：2018-04-25 16:33 本篇最终项目文件Github地址：github.com/paper520/vue.quick/tree/V1 Vue...

lijy91 2019-08-22 16:43 评论0 收藏0
Vue 笔记三：Vue2.0与1.0的区别

摘要：升级的区别与的断层式升级不同，延续了自己的风格。在命名方式和上有一些区别，掌握它们是你升级整个项目的关键。以下内容都是来源于个人项目的一些经验之谈，并非系统性的阐述。总目录前端经验收集器转载自个人建了前端学习群，旨在一起学习前端。升级的区别与angular的断层式升级不同，vue延续了自己的风格。在命名方式和API上有一些区别，掌握它们是你升级整个项目的关键。以下内容都是来源于个人...

Big_fat_cat 2019-08-21 11:35 评论0 收藏0