解决下面的问题 - 使用Vue的单文件组件
传统组件问题全局组件名称不能重复字符串模版无法高亮只能使用ES5的语法,不能使用预处理器babel
Vue单文件组件结构template标签:组件模板区域script标签:组件逻辑区域style scoped标签:样式区域
vue单文件代码结构图
<!-- 模板内容 -->
<template>
</template>
<!--组件js脚本-->
<script>
export default {
data: function() { return {}}
methods: {}
}
</script>
<!--组件样式定义-->
<style scoped>
</style>
配置步骤
文件结构
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>
配置步骤
//运行该命令
npm run build
用于快速生成Vue项目的基本架构
配置步骤
npm install -g @vue/cli
vue -V
Vue项目创建方法1. vue create projectName - 新版Vue项目无图形化界面创建2. vue ui - 新版本Vue项目有图形化界面创建3. vue init webpack projectName - 旧班Vue项目创建创建前安装:npm install -g @vue/cli -init
项目启动的命令行
项目启动端口号、打包后自动启动浏览器修改 - package.json
重点:必须使用说引号 - json字符串 转 json对象的规范要求
"vue": {
"devServer": {
"port": 8888,
"open": true
}
}
项目根目录创建 vue.config.js
vue.confog.js文件中
module.exports = {
devServer: {
open: true,
port: 80
}
}
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/weixin_39651356/article/details/105771622
内容来源于网络,如有侵权,请联系作者删除!