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

文章目录

      • 1. Vue单文件组件
      • 2. webpack中使用Vue
      • 3. webpack简单打包发布
      • 4. Vue脚手架
        • 4.1 使用配置
        • 4.2 vue ui创建项目
        • 4.3 创建项目文件结构
        • 4.4 脚手架自定义配置 - 打包自启动,端口号更改
          • 4.4.1 方式1 - 不推荐,该文件尽量专门用来管理包版本
          • 4.4.2 方式2 - 推荐

1. Vue单文件组件

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

传统组件问题
全局组件名称不能重复
字符串模版无法高亮
只能使用ES5的语法,不能使用预处理器babel
Vue单文件组件结构
template标签:组件模板区域
script标签:组件逻辑区域
style scoped标签:样式区域

vue单文件代码结构图


<template>

template>


<script>
    export default {
      
        data: function() {
       return {
      }}
        methods: {
      }
    }
script>


<style scoped>
    
style>

2. webpack中使用Vue

配置步骤
Webpack学习2 - Vue单文件、webpack、vue/cli脚手架、vue脚手架创建项目、脚手架的配置_第1张图片

文件结构
Webpack学习2 - Vue单文件、webpack、vue/cli脚手架、vue脚手架创建项目、脚手架的配置_第2张图片

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


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

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

3. webpack简单打包发布

配置步骤

  1. 步骤一
    Webpack学习2 - Vue单文件、webpack、vue/cli脚手架、vue脚手架创建项目、脚手架的配置_第4张图片

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


2. 步骤二

//运行该命令
npm run build


3. 步骤3
Webpack学习2 - Vue单文件、webpack、vue/cli脚手架、vue脚手架创建项目、脚手架的配置_第6张图片

4. Vue脚手架

4.1 使用配置

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


配置步骤

  1. 安装脚手架 - 最新版本
npm install -g @vue/cli


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

vue -V


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

Vue项目创建方法
1. vue create projectName - 新版Vue项目无图形化界面创建
2. vue ui - 新版本Vue项目有图形化界面创建
3. vue init webpack projectName - 旧班Vue项目创建
创建前安装:npm install -g @vue/cli -init

4.2 vue ui创建项目

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

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

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

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

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

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

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

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

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

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

4.3 创建项目文件结构

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

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

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
  }
}

你可能感兴趣的:(Vue,Vue,Webpack)