1.问题

当项目中组件非常多时,都会用专门的文件夹来分类组织不同的组件文件,便于查找和维护,但是,人和人创建的文件夹的习惯和命名差异很大!结果,一个人创建的项目结构和另一个人建立的项目结构很有可能不一样!给开发人员接手和维护新项目带来了巨大的障碍.

2.解决

前端的所有框架以及后端的node.js express项目,都已经有了标准化的脚手架项目结构,公司中开发,都是基于脚手架的标准项目结构进行开发的

3.好处

一个项目的结构和另一个项目的结构几乎完全相同,开发人员接手和维护新项目时,几乎是无缝衔接

4.什么是脚手架

已经拥有半成品核心功能和标准化文件夹结构的项目源代码

5.为什么用

标准化和避免重复编码

6.何时用

所有框架都是先创建脚手架,再脚手架标准项目结构基础上添加个性化功能定制

7.如何用

(1)创建脚手架项目:2步

a.先安装可反复创建脚手架项目的工具-只安装一次可反复使用
       npm i -g @vue/cli
       vue-V   看到版本号,说明安装成功
b.再反复使用工具,反复创建不同项目的脚手架源代码--每做一个新项目都要重新创建一套标准的脚手架项目源代码
      1). vue create 项目名 回车
		2). ? Please pick a preset: (Use arrow keys)
				 选择   预设      箭头 
			default (babel, eslint)
			  默认
  			> Manually select features
			  手动         功能
		3). ? Check the features needed for your project: (Press <space> to select,<a> to toggle all, <i> to invert selection)
		(*) Babel   将ES6,ES7代码翻译为所有浏览器都认识的传统的ES5以及以下代码
 		( ) TypeScript
 		( ) Progressive Web App (PWA) Support
 		(*) Router   VueRouter，是实现单页面应用的核心组件
 		( ) Vuex    
 		( ) CSS Pre-processors 如果项目中使用了sass或less，需要对css进行预编译，才选
 		() Linter / Formatter 学习阶段取消选择！linter是代码质量检查工具。
 		( ) Unit Testing
 		( ) E2E Testing
		4). ? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) N 回车
		默认VueRouter采用"#/相对路径"，作为路由地址。但是有人讨厌#，想去掉，就可以开启history模式。一旦开启history，VueRouter采用"/相对路径"作为路由地址。
		不要开启history模式，因为需要服务器端首页重定向功能的支持——专业的服务器端技术。
		5). ? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
					    
		In dedicated config files 放在多个不同的配置文件中
  		> package.json 集中放在一个package.json文件中
		6). Save this as a preset for future projects? (y/N) N 回车
		  保存这些为  预设  为 今后的项目
			因为每个项目的配置可能各不相同，所以保存一套预设，意义不大！
		7). 看到successfully说明在硬盘上创建脚手架项目源代码成功！
		🎉  Successfully created project xaxa.
		👉  Get started with the following commands:
 		$ cd xaxa
 		$ npm run serve

(2).首次运行脚手架项目:如:用vscode运行

a.用vscode打开新生成的项目文件夹xaxa
b.右键选择package.json文件,选"在终端中打开",看到 打开打开了一个新终端窗口
c.当终端窗口中出现:xxx\xaxa>,输入: npm run serve
  1). 自动启动了一个类似于live server和apache的临时服务器，用来保存项目的所有文件，供人们通过浏览器输入地址访问项目中的网页。
		2). 将项目源代码编译为所有浏览器都认识的HTML+CSS+JS代码。
	d. 看到: DONE  Compiled successfully in 2982ms 编译成功
	e. 按住Ctrl，点下方链接: Local:   http://localhost:8080/，就打开浏览器查看默认的页面了
	f. 在打开的浏览器中看到脚手架项目自带的首页
	g. 其实脚手架已经包含了单页面应用的核心功能: 
		1). 包含两个页面: Home和About
		2). 公共页头组件
		3). 在页头点Home和About，可在两个页面间切换，说明已经创建了VueRouter路由！

8.改造脚手架项目:

(1).如果自己开发,不用git,可删除.git文件夹
(2).脚手架默认不带axios,需要安装axios
   a.点击package.json 选择在终端打开
   b.看到xxx\xaxa>输入  npm  i  -save axios
   c.看到axios版本号,说明安装成功,打开node_modules文件夹,可看到axios文件

(3).试着修改脚手架默认首页的内容
   a.打开src/views/Home.vue
   b.<template>内是脚手架首页的HTML内容
      1).删除<HelloWorld msg="Welcome to Your Vue.js App"/>
      2).换成自己的内容:<h1>我的第一个脚手架</h1>
      3).删除<template>下方<script>元素及其内容
      4).删除src/components/HelloWorld.vue组件文件
   c.如果没有关闭npm run serve,则每修改一次脚手架中源代码,只要Ctrl+s保存修改后,都会自动重新编译,不用反复运行npm run serve, 就可以在浏览器中查看到新的修改后的效果,除非把npm  run serve关了,才需要重新运行npm run serve

9.脚手架项目文件夹结构

大致和SPA应用结构几乎完全一样,只不过分个别地方划分更细致而已

a.唯一完整的HTML页面被拆为三部分

(1).public/index.html  -- 几乎不需要我们修改
(2).公共的资源文件比如bootstrap.css应该放在public/css文件夹,并引入到index.html中
(3).公共的js文件如:jquery.js和bootstrap.js应该放在public/js文件夹,并引入到index.html中
(4).项目中用到的所有图片,应该放在public/imgs文件夹中
(5)不要在唯一完整的HTML页面中引入vue和vue-router.js了,因为脚手架采用模块化开发已经引入了
(6).页面组件和router 对象.js 不要在唯一完整的HTML页面中引入了,因为脚手架采用模块化开发,页面组件和router对象有专门的路径来保存
(7).new Vue()也不要放在唯一完整的HTML页面中了,到此,index.html页面再不需要做任何更改了!
(8).问题:<router-view>去哪儿了?
          src/App.vue文件中保存了:<div id="app">
                   <router-view></router-view>
                   </div>
            运行时会用App.vue中的HTML内容代替index.html中的空<div id="app"></div>
(9).问题:new Vue()去哪儿了?
    src/main.js
    import Vue from 'vue'  //以模块化方式引入vue.js
    import App from './App.vue'//引入App.vue文件中的内容
    import router from './router' //以模块化方式引入new VueRouter()对象和路由字典
    Vue.config.productionTip=false
    new Vue({ //创建监控整个页面的大的Vue对象
              router,
              render:h=>(App)  //加载app中的HTML内容
    }).$mount('#app')  挂载到index.html中电梯<div id="app">位置
 (10).npm run serve 先执行main.js ,引入App.vue中的内容,并用App.vue中的内容代替了index.html中空的<div id="app"></div>

b.页面组件

1). 脚手架规定所有页面组件都应该放在src/views文件夹下
2). 每个页面组件应该定义为一个xxx.vue文件，不是.js文件
	a. .vue中可同时包含一个组件的HTML+JS+CSS
	b. .js中只能包含js和简单的HTML，无法包含组件的css内容。
3). 每个.vue文件都可以包含三部分内容:
	a. <template> <!--专门保存当前页面的HTML内容-->
		<唯一父元素>
			当前页面的HTML内容
		</唯一父元素>
	 </template>
	b. <style scoped>
		只写当前页面用到的css样式
		</style>
	问题: 因为将来所有.vue文件中的<style>都会被编译到一个.css文件中。极有可能造成不同.vue中的选择器和样式发生冲突！

	解决: 今后所有<style>都要写为: <style scoped> 
	       scoped会自动保证不同组件的样式只局限于当前组件，不影响其他组件。

	c. <script>
          当前页面组件的组件对象js内容
          </script>
	c. 创建路由器对象和路由字典: src/router/index.js
		import Vue from 'vue' //引入vue.js
		import VueRouter from 'vue-router' //引入vue-router.js文件
		import Home from '../views/Home.vue' //引入views文件夹下的首页.vue文件内容

		Vue.use(VueRouter) //引入vue-router.js文件中的VueRouter对象

  		const routes = [
  			{ path: '/', component: Home }, //首屏加载的页面
  			{//其它页面只有在用到时才懒加载
    				path: '/about',
    				component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  			}
		]

		const router = new VueRouter({
  			routes  //routes:routers
		})

		export default router  //模块化开发: 抛出router对象，供其它文件引用
						   //如果没有这句话，其它文件，引用不了router对象。
	d. 全局组件: 
		1). 集中创建在src/components文件夹下
		2). 每个全局组件一个.vue文件
		3). 在定义组件时，全局组件和页面组件的内容没有任何差别，也都是包含三部分
		a. <template>组件的HTML内容</template>
		b. <style scoped>组件的css内容</style>
		c. <script>组件对象的js内容</script>
		4). 必须在main.js中，引入components下的全局组件.vue文件，然后再用Vue.component()函数，将引入的组件内容变成全局组件: 
		import MyHeader from "./components/MyHeader"
		Vue.component("my-header", MyHeader);
		5). 结果在src/views文件夹下的页面.vue中可用
		<my-header></my-header>引入全局组件页头

脚手架(Vue2.0)