在webpack构建的项目中使用vue

最新推荐文章于 2023-08-10 16:46:37 发布

SoulForest

最新推荐文章于 2023-08-10 16:46:37 发布

阅读量177

点赞数

分类专栏： webpack 文章标签： vue

本文链接：https://blog.csdn.net/Soul_Forest/article/details/107945176

版权

webpack 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

在webpack构建的项目中使用vue

1.安装vue

npm i vue -S

在这里插入图片描述

若是出错,把package-lock.json删除就好了

2.修改配置

index.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>

  </head>
  <body>
    <div id="app">
      <h1>{{msg}}</h1>
    </div>

  </body>
</html>

main.js:

//如何在webpack创建的项目中使用vue


//注意：在webpack中， 使用import Vue from 'vue'导入的Vue构造函数，功能不完整，只提供了runtime-only的方式
//并没有提供网页中的使用方式

//这种方式可以
// import Vue from '../node_modules/vue/dist/vue.js'
import Vue from 'vue'

let vm=new Vue({
    el:"#app",
    data:{
        msg:123
    }
})

导入vue时会发生错误，有三种解决思路：

1）修改node_module/vue/package.json文件

找到其中的main,将文件改为vue.js

在这里插入图片描述

2)使用import Vue from '…/node_modules/vue/dist/vue.js’导入

3）修改webpack.config.js

在其中加入

resolve: {
  alias: {//设置vue被导入时候的包路径
    "vue$":"vue/dist/vue.js"
  }
}

修改后的webpack.config.js：

const path=require('path')

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

//导入在内存中生成html的插件
//只要是插件都要放到plugins中去
const htmlWebpackPlugin=require('html-webpack-plugin')

module.exports={
  entry:path.join(__dirname,"./src/main.js"),//入口
  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里面是正则表达式
      {test: /\.less$/,use:['style-loader','css-loader','less-loader']},//配置处理less文件的规则
      {test: /\.scss$/,use:['style-loader','css-loader','sass-loader']},//配置处理scss文件规则
      {test:/\.jpg|png|gif|bmp|jpeg$/,use:'url-loader?limit=6000&name=[hash:8]-[name].[ext]'},//配置处理url
      {test:/\.js$/,use:'babel-loader', exclude: /node_modules/},//配置bable转换高级的es语法
    ]
  },
  resolve: {
    alias: {//设置vue被导入时候的包路径
      "vue$":"vue/dist/vue.js"
    }
  }

}

SoulForest

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在webpack构建的项目中使用vue

在webpack构建的项目中使用vue1.安装vuenpm i vue -S若是出错,把package-lock.json删除就好了2.修改配置index.html:<!DOCTYPE html><html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> </head> <body>
复制链接

扫一扫