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 = falsenew 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>
5.vue-eslint:纠正语法和风格错误
ESLint是一个QA工具，用来避免低级错误和统一代码的风格，ESLint的主要用途：
审查代码是否符合编码规范和统一的代码风格；
审查代码是否存在语法错误；
命令:npm run lint