一：在普通网页中使用 vue

  1. 使用 script 标签，引入 vue 包
  2. 在 ndex 页面中，创建一个 id 为 App 的 div 容器
  3. 通过 new Vue 得到一个 vue 实例

二：在 webpack 中使用 vue

　　执行命令 ： npm i vue -S 把 vue 包安装成项目运行依赖

main.js：

//入口文件

//如何在 webpack 构架的项目中，使用 Vue 进行开发

//      执行命令 npm i vue -s ,把 vue 包安装成项目运行依赖

//在 webpack 中尝试使用 Vue；

//注意：在 webpack 中，使用 import Vue from ‘vue’ 导入的 Vue 构造函数，功能不全，只提供了 runtime-only 的方式，并没有提供像网页中那样的使用方法，实际导入的包是根据包的查找规则导入的

import Vue from 'vue' // 这种方法要在 webpack.config.js 中添加别名指定（修改导入 Vue 包的路径）

// import Vue from '../node_modules/vue/dist/vue.js'//这样是可以的，也可以使用像网页那种使用方法了，不用再 webpack.config.js 中添加别名 alias 了；

//包的查找规则：

//    1：找项目根目录中有没有 node_modules 的文件夹

//    2：在 node_modules 中根据包名找对应的 vue 文件夹

//    3：在 vue 文件夹中找一个叫做 package.json 的包配置文件

//     4：在package.json 文件中查找一个 main 属性【 main 属性指定了这个包在被加载时候的入口文件】

var vm = new Vue({

    el:'#app',

    data:{

        msg: '123'

    }

});

webpack.config.js：（添加 resolve 节点）

const path = require('path') //node操作URL要用path模块

//导入在内存中生成html页面的插件

//只要是插件都要放到plugin节点中去

const htmlWebpackPlugin = require('html-webpack-plugin')

//node语法

//这个配置文件就是一个js文件，通过node中的模块操作，向外暴露了一个配置对象

module.exports = {

    //在配置文件中需要主动指定入口和出口

    entry:path.join(__dirname,'./src/main.js'),//入口，表示webpack要打包那个文件

    output:{//输出文件相关配置

        path:path.join(__dirname,'./dist'),//指定，打包好的文件，输出到那个目录中去

        filename: 'bundle.js'//指定输出文件名称

    },

    plugins: [//配置插件的节点

        new htmlWebpackPlugin({//创建一个在内存中生成HTML页面的插件

            template: path.join(__dirname,'./src/index.html'),//指定模板页面，将会根据指定的页面路径，去生成内存中的页面

            filename: 'index.html',//指定生成的页面的名称

        })

    ],

    module:{//这个节点，用于配置所有第三方模块加载器

        rules:[//所有第三方模块的匹配规则

            { test:/\.css$/, use:['style-loader','css-loader'] }, //配置处理.css文件的第三方loader规则

            { test:/\.scss$/, use:['style-loader','css-loader','sass-loader'] }, //配置.scss文件的第三方loader规则

            { test:/\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=6000&name=[name].[ext]'},

            { test:/\.js$/, use: 'babel-loader', exclude: /node_modules/ } //配置 babel 转化ES6 语法

        ]

    },

    resolve: {

        alias:{//修改 Vue 被导入时候的包的路径

            "vue$":"vue/dist/vue.js"

        }

    }

}

index.html：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <!--这时容器-->

    <div id="app">

        <p>{{msg}}</p>

    </div>

</body>

</html>

如果不在 webpack.config.js 中添加 resolve 节点，它真实寻找的路径文件：

首先报错：

真实寻找路径文件为 node_modules/vue/package.json 文件中有一个为 main 的属性，其属性值即实际import真实引入的 js 文件

webpack 中导入 vue 和普通网页使用 vue 的区别（四）的更多相关文章

  1. 20 区分webpack中导入vue和普通网页使用script导入Vue的区别

    回顾包的查找规则: 1.找项目根目录中有没有node_modules的文件夹 2.在node_modules中根据包名,找对应的vue文件夹 3.在vue文件夹中,找一个叫做package.json的 ...

  2. render方法渲染组件和在webpack中导入vue

    使用component注册的组件div容器里可以放多个,但是使用render的只能放一个 <div id="app"> <p>我可以放两个</p> ...

  3. vue仿微信网页版|vue+web端聊天室|仿微信客户端vue版

    一.项目介绍 基于Vue2.5.6+Vuex+vue-cli+vue-router+vue-gemini-scrollbar+swiper+elementUI等技术混合架构开发的仿微信web端聊天室— ...

  4. webpack中mainifest.js vendor.js app.js 三者的区别

    场景: 大家在利用构建工具进行应用最后的打包过程中,我们希望做到的是将业务代码和第三方引用模块代码分开打包. 因为第三方引用模块代码通常很大,而且在不引入新的模块之前基本上是不会变动的.所以我们需要将 ...

  5. vue2.0基础知识，及webpack中vue的使用

    ## 基础指令 ## [v-cloak]{         Display:none;     }     <p v-cloak>xx{{msg}}xx</p> //解决闪烁问 ...

  6. webpack中如何使用vue

    1.安装 vue包:npm i vue -S 2.由于在webpack中,推荐使用.vue这个组件模版文件来定义组件,不然会出现vue.js移动和一些高级语法的不支持,因此需要安装能解析这种文件的lo ...

  7. [vue]webpack中使用组件

    https://blog.csdn.net/ywl570717586/article/details/79984909 vue.js中全局组件 全局组件的定义 <!DOCTYPE html> ...

  8. 在webpack中配置vue.js

    在webpack中配置vue.js 这里有两种在webpack中配置vue.js的方法,如下: 1.在main.js中引入vue的包: index.html: <!DOCTYPE html> ...

  9. webpack中使用vue

    1.安装vue cnpm i install -S 2.由于在 webpack 中,推荐使用 .vue 的文件模板文件定义组件 , 所以 ,需要安装 能解析这种文件的 loader cnpm i vu ...

随机推荐

  1. appium(2)-Setting up Appium

    Setting up Appium Running Appium on Windows Additional Setup for Android App Testing Download latest ...

  2. codeforces 570D.Tree Requests

    [题目大意]: 给定一棵树,树的每个节点对应一个小写字母字符,有m个询问,每次询问以vi为根节点的子树中,深度为hi的所有节点对应的字符能否组成一个回文串: [题目分析]: 先画个图,可看出每次询问的 ...

  3. 找到bashrc

    (1)直接sudo gedit ~/.bashrc就可以了,编辑完后关闭就行 (2)主文件夹下ctrl+h就能找到.bashrc文件 之所以要找到bashrc文件,是为了把命令 source /opt ...

  4. poj3349 Snowflake Snow Snowflakes —— 哈希表

    题目链接:http://poj.org/problem?id=3349 题意:雪花有6个瓣,有n个雪花,输入每个雪花的瓣长,判断是否有一模一样的雪花(通过旋转或翻转最终一样,即瓣长对应相等).如果前面 ...

  5. java IO流文件的读写具体实例(转载)

    引言: 关于java IO流的操作是非常常见的,基本上每个项目都会用到,每次遇到都是去网上找一找就行了,屡试不爽.上次突然一个同事问了我java文件的读取,我一下子就懵了第一反应就是去网上找,虽然也能 ...

  6. 基于logstash+elasticsearch+kibana的日志收集分析方案（Windows）

    一 方案背景     通常,日志被分散的储存不同的设备上.如果你管理数十上百台服务器,你还在使用依次登录每台机器的传统方法查阅日志.这样是不是感觉很繁琐和效率低下.开源实时日志分析ELK平台能够完美的 ...

  7. [原创]java在线比较两个word文件

    一.项目背景 开发文档管理系统或OA办公系统的时候,实现在线处理word文档的功能比较容易,但是也经常会有客户提出文档版本管理的需求,这就需要同时在线打开两个word文件,对比两个不同版本的word文 ...

  8. 【C】由printf("%d\t%d\t%d\n",a,a+=(a++),a);引起的思考

    #include<stdio.h> int main() { ,a1=; ,b1=; printf("(1)后自加:\n"); printf("a+=(a++ ...

  9. 「NOI2015」「Codevs4621」软件包管理器（树链剖分

    4621 [NOI2015]软件包管理器 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 钻石 Diamond   题目描述 Description Linux用户和OSX用户一定对 ...

  10. 基于候选区域的R-CNＮ系列网络简介

    使用候选区域方法(region proposal method)创建目标检测的感兴趣区域(ROI).在选择性搜索(selective search,SS)中,首先将每个像素作为一组.然后,计算每一组的 ...