Vuejs 前端开发技术与实践第PPT课件（共12章）第9章 Vue Cli脚手架.pptxVIP

Vue CLI是Vue 应用程序开发的标准工具 ，Vue CLI 是一个基于 Vue 进行 快速开发的完整系统 ，Vue CLI是基于 webpack 构建 ， 并带有合理的默认配 置 ， 可以通过项目内的配置文件进行配置 ， 可以通过插件进行扩展 。使用 Vue CLI能快速开始一个Vue项目。 第9章 Vue Cli脚手架 9.1 搭建Vue CLI开发环境 9. 1. 1 下载安装node.js 从Node.js 的中文官方网站/download/下载 9. 1.2安装Vue Cli脚手架构建工具 在命令行中运行命令 npm install -g @vue/cli 安装之后 ， 在命令行中输入vue –V回车 ， 如果能查看到版本号 ， 说明安装成功 9.2使用vue-cli创建项目 （1） 在命令行中切换到项目存储目录 （2） 输入“vue create my app ”指令后回车 （3） 选择项目插件配置 界面显示可以选择的插件配置选项 ， 各项功能简述如下： (1) Babel选项是转码器 ， 可以将ES6代码转为ES5代码。 (2) Typescript选项 ， Typescript 是一种给 Javascript 添加特性的语言扩展。 (3) Progressive Web App (PWA) Suppor选项 ， 渐进式Web应用程序。 (4) Router选项 ， vue-router是vue路由。 (5) Vuex 选项 ，Vuex 是vue的状态管理模式。 (6) CSS Pre-processors 选项 ， CSS 预处理器（如： less 、sass） 。 (7) Linter / Formatter选项 ， 代码风格检查和格式化（如： ESlint） 。 (8) Unit Testing 选项 ， 单元测试。 (9 ) E2E Testing选项 ， E2E测试 （4） 选择路由模式 在这选择history模式讲解 ， 直接按回车或输入y键。 （5） 选择CSS预编译 （6） 选择如何存放配置 把当前配置存放在In package.json文件中， （7） 自动下载新建项目所需要的各种包文件 9.3 启动项目 （1） 进入项目目录 （2） 启动项目 运行npm run serve指令 ， 编译完成后显示项目运行的网址及提示信息 ， 如图所示。 （3） 在浏览器中打开项目首页 打开浏览器 ， 在地址栏输入“http://localhost :8080 ”回车， 显示Vue默认的示例项目界面。 9.4 项目的配置目录及配置文件 1 、项目目录 （1） node_modules目录： 存放npm命令下载的开发环境和生产环境的依赖包。 （2） public目录： 用于存放静态资源。 （3） s rc目录 : 存放项目源码及需要引用的资源文件 ， 开发过程的文件都存放在src 目录下。 1 、项目根目录下的配置文件 （1） gitignore文件： 配置g it上传时要忽略的文件格式。 （2） babel.config.js文件 : 是一个工具链 ， 主要用于在当前和较旧的浏览器或环境中将ES6的代码 转换向后兼容。 （3） package.json文件是项目配置文件 ， 文件内容以json 的格式描述项目基本信息 、项目的依赖包 等信息。