Vue脚手架①

Vue脚手架①

文章目录

​​创建Vue脚手架​​​​分析Vue脚手架的结构​​​​Vue脚手架初使用​​​​初次使用Vue脚手架时遇到的几个问题​​

​​问题一​​​​问题二​​

创建Vue脚手架

Vue脚手架又称​​Vue CLI​​

官方网址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文件注解：

初次使用Vue脚手架时遇到的几个问题

问题一

在高版本的Vue脚手架中，组件的name属性要使用双驼峰表示法或者​​-​​表示法

例如： MySchool 或者 my - school

问题二

有关组件的暴露方式：

如果你使用的是export default搭配Vue.extend的简写方式，这种最方便、也最不容易出错：

但如果你使用的是export default搭配Vue.extend的一般写法，那么你暴露的时候要将组件里面的配置项一个个的全暴露出来，并且还要一个个地去引入Vue：

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。