Vue学习笔记 6 - 使用 Vue 的配置过程/组件化开发引入/文件封装处理/ plugin /搭建本地服务器/配置文件的分离

最新推荐文章于 2023-02-07 22:41:08 发布

Caramely

最新推荐文章于 2023-02-07 22:41:08 发布

阅读量270

点赞数

文章标签： Vue MacOS

本文链接：https://blog.csdn.net/Caramely/article/details/102522521

版权

webpack 官网链接：webpack 中文文档

webpack 使用 Vue 的配置过程

引入 Vue.js

后续项目中，我们会使用 Vue.js 进行开发，而且会以特殊的文件来组织 vue 的组件。那么如何在 webpack 环境中集成 Vue.js 呢？我们希望在项目中使用 Vue.js ，那么必然需要对其有依赖，所以需要先进行安装。

因为我们后续在实际开发中也会使用 vue，所以并不是开发时依赖(使用的是–save-dev)

npm install vue --save

main.js：

//使用 Vue 进行开发
import Vue from 'vue'

new Vue({
   
    el: '#app',
    data: {
   
        msg: 'Hello,Vue'
    }
})

index.jsp：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloVue</title>
</head>
<body>
<div id="app">
    <h2>{
   {
   msg}}</h2>
</div>
<script src="./dist/bundle.js"></script>
</body>
</html>

此时运行程序会出现报错,这是因为系统自动选择的是runtime-only版本的 Vue，所以我们要修改webpack.config.js的配置，让系统使用runtime-compiler版本的 Vue。

runtime-only -> 代码中，不可以有任何 template
runtime-compiler -> 代码中，可以有 template，因为有 compiler 可以用于编译 template

配置webpack.config.js：

module.exports = {
   
    entry: './src/main/webapp/main.js',
    output: {
   
        // 动态获取绝对路径
        //（__dirname：获取上下文路径,'dist'：在后方拼接 dist）
        path: path.resolve(__dirname, 'src/main/webapp/dist'),
        // './src/main/webapp/dist'
        filename: 'bundle.js',
        publicPath: "src/main/webapp/dist/"
    }
    , resolve: {
   
        //alias：别名
        alias: {
   
            'vue$': 'vue/dist/vue.esm.js'
        }
    }
}

结果：

npm run build

创建 Vue 时，el 和 template 的关系

main.js：

//使用 Vue 进行开发
import Vue from 'vue'

new Vue({
   
    el: '#app',
    template: `
    <div>
        <h2>{
    {msg}}</h2>
    </div>
    `,
    data: {
   
        msg: 'Hello,Vue'
    }
})

index.jsp：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HelloVue</title>
</head>
<body>
<div id="app">
</div>
<script src="./dist/bundle.js"></script>
</body>
</html>

Vue 组件化开发引入

如果想采用组件化的形式进行开发，

最低0.47元/天解锁文章

Caramely

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习笔记 6 - 使用 Vue 的配置过程/组件化开发引入/文件封装处理/ plugin /搭建本地服务器/配置文件的分离

webpack 官网链接：webpack 中文文档 webpack 使用 Vue 的配置过程引入 Vue.js后续项目中，我们会使用 Vue.js 进行开发，而且会以特殊的文件来组织 vue 的组件。那么如何在 webpack 环境中集成 Vue.js 呢？我们希望在项目中使用 Vue.js ，那么必然需要对其有依赖，所以需要先进行安装。因为我们后续在实际开发中也会使用 vu...
复制链接

扫一扫