2021-10-30 vue笔记-脚手架vue-cli(二) 项目文件介绍和vue-eslint

前端OnTheRun

已于 2022-10-17 19:18:07 修改

阅读量77

点赞数

分类专栏： vue学习笔记文章标签： vue.js javascript 前端 vue-cli 脚手架

于 2021-10-30 17:18:32 首次发布

本文链接：https://blog.csdn.net/rowlet/article/details/121053705

版权

vue学习笔记专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1.入口主页面:index.htrml

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

2.vue的入口文件，vue文件初始化位置:main.js

// 这是ES6导入规范
import Vue from 'vue' // 这是CommonJS导入规范: ar vue = require("vue")
import App from './App.vue'

// import helloworld from './components/HelloWorld.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
        router,
        store,
        render: h => h(App)//渲染单文件组件App.vue
    }).$mount('#app') //使用函数mount函数挂载节点#app上,对应index.html中的<div id="app"></div>

3.汇总所有组件的根组件:App.vue

快捷键:空.vue文件中输入vue回车

<template>
  <div id="app">
      <!-- 3.组件调用 -->
    <Navbar></Navbar>
  </div>
</template>
<script>
//引入vue
import Vue from "vue"
// 1.组件引入
import Navbar from "./components/Navbar"
// 2.全局组件注册
Vue.component("Navbar",Navbar);//前面的"Navbar"是组件名,后面的Navbar是引入的外部组件注册

// 这是CommonJS的导出方式:module.exports
// 这是ES6的导出方式
	export default {

	}
</script>
<style>

</style>

4.外部单文件组件(首字母大写):Navbar.vue

<template>
  <div>
    我是sidebar
  </div>
</template>

<script>
export default {

}
</script>
<style lang="scss" scoped>
 // 1.lang="scss"表示支持sass样式
/*解决报错(sass-loader未安装):Can't resolve 'sass-loader'
命令:npm install sass-loader -D*/
// 2.scope作用域表示此style标签中的样式仅影响当前组件

</style>