文章目录
- 创建Vue脚手架
- 分析Vue脚手架的结构
- Vue脚手架初使用
- 初次使用Vue脚手架时遇到的几个问题
- 问题一
- 问题二
创建Vue脚手架
Vue脚手架又称Vue CLI
官方网址https://cli.vuejs.org/zh/
- 第一步（仅第一次执行）：全局安装@vue/cli。
npm install -g @vue/cli - 第二步：切换到你要创建项目的目录，然后使用命令创建项目
vue create xxxx
xxxx处编辑你的项目名称
- 第三步：启动项目
npm run serve - 如要停止项目使用ctrl + c
分析Vue脚手架的结构
├── node_modules
├── public
│ ├── favicon.ico: 页签图标
│ └── index.html: 主页面
├── src
│ ├── assets: 存放静态资源
│ │ └── logo.png
│ │── component: 存放组件
│ │ └── HelloWorld.vue
│ │── App.vue: 汇总所有组件
│ │── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件
├── README.md: 应用描述文件
├── package-lock.json：包版本控制文件
然后我们再看src文件夹里的东西：
其中main.js非常重要，在我们执行npm run serve命令之后，直接就会执行main.js(所以它也被称为入口文件)。
assets文件夹我们经常可以在前端项目中看到。这个文件夹里面一般放静态资源。
静态资源和动态资源的概念：
静态资源：我的理解是前端的固定页面，这里面包含HTML、CSS、JS、图片等等，不需要查数据库也不需要程序处理，直接就能够显示的页面。
具体形式为：客户端发送请求到web服务器，web服务器拿到对应的文件，返回给客户端，客户端解析并渲染出来。
动态资源：需要程序处理或者从数据库中读数据，能根据不同的条件在页面显示不同的数据，优点是内容更新不需要修改页面，缺点是访问速度不及静态页面。
具体形式为：客户端请求的动态资源，先把请求交给web的一个存储点，web存储点连接数据库，数据库处理数据之后，将数据交给web服务器，web服务器返回给客户端解析渲染处理。
components文件夹里放着所有的组件(除了App.vue)
Vue脚手架初使用
我们将上一节中的代码运行到脚手架上：
注意：
- main.js文件不更换
- index.html文件不更换
- 将脚手架中的hello组件删除，替换成自己的
- 组件的引入地址是否正确
index.html文件注解：
为什么页签图标的引入地址要写成<link rel=“icon” href=“<%= BASE_URL %>favicon.ico”>？
写成<link rel=“icon” href=“./favicon.ico”>不行吗？
这样写是因为当项目开发完了部署到服务器上的时候，容易产生各种各样的路径问题。所以Vue脚手架为了优化这一个问题就建议不使用./ ../这些符号，而是使用<%= BASE_URL %>去替代./ （在底层有相应的的处理逻辑）
初次使用Vue脚手架时遇到的几个问题
问题一
在高版本的Vue脚手架中，组件的name属性要使用双驼峰表示法或者-表示法
例如：
MySchool 或者 my - school
问题二
有关组件的暴露方式：
如果你使用的是export default搭配Vue.extend的简写方式，这种最方便、也最不容易出错：
<template>
<div>
<h2>学校名称:{{SchoolName}}</h2>
<h2>学校地址:{{SchoolAddress}}</h2>
<hr>
</div>
</template>
<script>export default {
name:'DongBei',
data(){
return {
SchoolName:'NEFU',
SchoolAddress:'哈尔滨',
}
},
}</script>
<style>
</style>
但如果你使用的是export default搭配Vue.extend的一般写法，那么你暴露的时候要将组件里面的配置项一个个的全暴露出来，并且还要一个个地去引入Vue：
<template>
<div>
<h2>学校名称:{{SchoolName}}</h2>
<h2>学校地址:{{SchoolAddress}}</h2>
<hr>
</div>
</template>
<script>import Vue from 'vue'
const SchoolName = Vue.extend({
name:'DongBei',
data(){
return {
SchoolName:'NEFU',
SchoolAddress:'哈尔滨',
}
},
})
export default {
SchoolName,
data(){
return {
SchoolName:'NEFU',
SchoolAddress:'哈尔滨',
}
},
name:'DongBei'
}</script>
<style>
</style>