Webpack学习2 - Vue单文件、webpack、vue/cli脚手架、vue脚手架创建项目、脚手架的配置

文章目录

1. Vue单文件组件

解决下面的问题 - 使用Vue的单文件组件

vue单文件代码结构图

<!-- 模板内容 -->
<template>

</template>

<!--组件js脚本-->
<script>
    export default {
     
     
        data: function() {
     
      return {
     
     }}
        methods: {
     
     }
    }
</script>

<!--组件样式定义-->
<style scoped>
    
</style>

2. webpack中使用Vue

配置步骤
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WYoXOlra-1587889568886)(en-resource://database/22952:1)]

文件结构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GZZADICW-1587889568896)(en-resource://database/22954:1)]

App.vue

<template>
    <div>
        <h1>这是我定义的app组件</h1>
    </div>
</template>

<script>
    export default {
     
     
        name: "App"
    }
</script>

<style scoped>
    h1 {
     
     
        color: yellow;
        border: 1px solid black;
    }
</style>

index.js

import './css/index.css'

// 导入Vue类
import Vue from 'vue'

// 导入名为app.vue这个组件
import App from "./components/App.vue"

// 实例化Vue对象
const vm = new Vue({
    // 容器
    el: "#app",

    // 在容器内需要渲染加入的组件
    render: h => h(App)
})

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <script src="/main.js" ></script>
</head>
<body >
    <div id="app" ></div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OcS90UL2-1587889568904)(en-resource://database/22956:1)]

3. webpack简单打包发布

配置步骤

步骤一

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KRiBiC2X-1587889568914)(en-resource://database/22964:1)]

2. 步骤二

//运行该命令
npm run build

3. 步骤3
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NbDG7hKN-1587889568918)(en-resource://database/22966:1)]

4. Vue脚手架

4.1 使用配置

用于快速生成Vue项目的基本架构

配置步骤

安装脚手架 - 最新版本

npm install -g @vue/cli

2. 检查脚手架是否安装 - 看版本号

vue -V

3. 创建Vue项目 - 三种方式

4.2 vue ui创建项目

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ONQ40y8o-1587889568923)(en-resource://database/22968:1)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JMuhih9N-1587889568926)(en-resource://database/22970:1)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q85hDBNf-1587889568930)(en-resource://database/22972:1)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d5uASi84-1587889568933)(en-resource://database/22974:1)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9W4lifeO-1587889568937)(en-resource://database/22976:1)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d1LpXYGW-1587889568946)(en-resource://database/22978:1)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4kCIkQiW-1587889568951)(en-resource://database/22980:1)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x6sedKG7-1587889568954)(en-resource://database/22982:1)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4fArLZZG-1587889568960)(en-resource://database/22984:1)]

项目启动的命令行
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5ZNVIBC2-1587889568963)(en-resource://database/22990:1)]

4.3 创建项目文件结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZqTX3XmY-1587889568967)(en-resource://database/22986:1)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e7iVXJXF-1587889568971)(en-resource://database/22988:1)]

4.4 脚手架自定义配置 - 打包自启动，端口号更改

4.4.1 方式1 - 不推荐，该文件尽量专门用来管理包版本

项目启动端口号、打包后自动启动浏览器修改 - package.json

重点：必须使用说引号 - json字符串转 json对象的规范要求

  "vue": {
    
    
	"devServer": {
    
    
		"port": 8888,
		"open": true
	}
  }

4.4.2 方式2 - 推荐

项目根目录创建 vue.config.js

vue.confog.js文件中

module.exports = {
  devServer: {
    open: true,
    port: 80
  }
}