Vue应用程序开发-(9).pptxVIP

《Vue应用程序开发》第1节：快速构建项目第7章：Vue脚手架

7.1快速构建项目7.2前端路由7.3服务器访问Axios7.4Webpack基础

第1节快速构建项目01

1.1快速构建项目vue-cli简介有一套成熟的vue项目架构设计,能够快速初始化一个Vue项目.vue-cli是官方支持的一个脚手架，会随本版本进行迭代更新。vue-cli提供了一套本地的node测试服务器，使用vue-cli自己提供的命令，就可以启动服务器。集成打包上线方案。还有一些优点，包括：模块化，转译，预处理，热加载，静态检测和自动化测试等，等大家深入使用下去就会发现vue-cli的强大之处。

1.1快速构建项目Vue.js官方命令行工具vue-cli（安装脚手架前需安装node） #全局安装vue-cli $npminstall-g@vue/cli #查看当前版本 $vue--version #创建一个新的项目 $vuecreate“项目名” #运行Vue程序 $npmrunserve

1.1快速构建项目

1.1快速构建项目执行命令：npmrunserve来启动项目，启动完成后会自动弹出默认网页：

1.1快速构建项目下面依次介绍各个文件夹的作用。node_modules//项目依赖文件夹(对webpack进行了封装)public文件夹├──public│├──favicon.ico//网站图标│├──index.html//页面入口文件src文件夹├──src//资源目录│├──assets//资源文件夹，存放图片之类的资源│├──components//组件文件夹，自己写的组件都放在这个文件夹下│├──views//我们所写的页面都放在这里│├──App.vue//应用组件，所有自己写的组件都是在这个组件之上运行│├──main.js//webpack入口文件│├──router//路由文件夹，决定了页面的跳转规则下│└──store//vuex状态管理文件夹balel.config.js//使用一些预设package.json//项目描述及依赖package-lock.json//版本管理使用的文件vue.config.js//【如果没有，请手动创建】

1.1快速构建项目为了更好的适应复杂的项目开发，Vue.js支持以.vue为扩展名的文件，来定义一个完整组件，称为单文件组件，是Vue.js自定义的一种文件格式。一个.vue文件就是一个单独的组件，在文件内封装了组件相关的代码：html、css和javascript，最终通过webpack也会编译成*.js在浏览器运行。.vue文件由三部分组成：template、style和script。在src目录下创建hello.vue文件，内容如下：

1.1快速构建项目想使用上面的Vue文件，需要在main.js中使用ES6引入模块语法引入，代码如下：importVuefromVue;importhellofrom./hello.vue;newVue({el:#app,template:hello/,components:{hello}});

1.1快速构建项目我们知道创建脚手架项目后，index.html是入口地址，调用App.vue，想要在App.vue调用其他组件，我们称App.vue为根组件。App根组件一个很常用的功能是引入我们编写的组件，即我们编写的组件可以嵌套在App根组件中，这样我们自己编写的组件就可以添加到项目中。组件之间的嵌套可以通过下图来辅助理解。

1.1快速构建项目举例：组件之间的嵌套方法（1）在/src/components文件夹下新建一个组件，命名为Vuejs.vue，组件内容如下：

1.1快速构建项目举例：组件之间的嵌套方法（2）组件创建之后，我们首先要在根组件中使用import命令引入该组件，然后在components属性中局部注册组件，最后在template/template中调用组件即可。案例：0701-快速构建项目

1.1快速构建项目父组件向子组件传递数据 父组件A通过props