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>引入全局组件页头