Webpack学习2 - Vue单文件、webpack、vue/cli脚手架、vue脚手架创建项目、脚手架的配置
1. Vue单文件组件
解决下面的问题 - 使用Vue的单文件组件
传统组件问题全局组件名称不能重复字符串模版无法高亮只能使用ES5的语法，不能使用预处理器babel
Vue单文件组件结构template标签：组件模板区域script标签：组件逻辑区域style scoped标签：样式区域
vue单文件代码结构图
<!-- 模板内容 --><template></template><!--组件js脚本--><script>export default {data: function() { return {}}methods: {}}</script><!--组件样式定义--><style scoped></style>
2. webpack中使用Vue
配置步骤
文件结构
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>
3. webpack简单打包发布
配置步骤
- 步骤一
- 步骤二
//运行该命令npm run build
- 步骤3
4. Vue脚手架
4.1 使用配置
用于快速生成Vue项目的基本架构
配置步骤
- 安装脚手架 - 最新版本
npm install -g @vue/cli
- 检查脚手架是否安装 - 看版本号
vue -V
- 创建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创建项目
项目启动的命令行
4.3 创建项目文件结构
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}}
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/weixin_39651356/article/details/105771622
内容来源于网络，如有侵权，请联系作者删除！