1.开发工具——VSCode我选择VSCode是因为它是一个易于使用的工具，VSCode中的每个功能都做得很好，构建了一些简单的功能集，包括语法高亮、智能完成、集成的git和内置的编辑器-in调试工具等，让你的开发更有效率。下载地址官网：https://code.visualstudio.com/推荐插件Vetur-语法高亮、Intellisense、Emmet等VueVSCodeSnippets-快速生成Vue模板EsLint-语法修正AutoCloseTag-自动关闭HTML/XMLtagsAutoRenameTag-自动完成对端标签的同步修改PathIntellisense-路径自动补全BracketPairColorizer-为代码中的括号添加亮色你可以在这里找到关于扩展的文档：https://code.visualstudio.com/docs/extensions/overview2。安装Node.jsNode.js是一个基于ChromeV8引擎的JavaScript运行环境。Node.js使用事件驱动、非阻塞I/O模型。下载地址官网：https://nodejs.org/en/（一路next即可）安装完成后，可以在控制台查看node和npm对应的版本node-vnpm-v永久使用淘宝镜像命令：npm配置设置注册表https://registry.npm.taobao.org3。安装vue-devtoolsvue-devtools是一款基于chrome浏览器的vue应用调试插件，可以大大提高我们的调试效率。接下来介绍vue-devtools的安装。安装方式一：直接从chromestore安装vue-devtools可以直接从chromestore下载安装方式二：手动安装①找到vue-devtools的github项目clone到本地。vue-devtoolsgitclonehttps://github.com/vuejs/vue-devtools.git②安装项目需要的npm包npminstall③编译项目文件npmrunbuild④添加到chrome浏览器输入地址“chrome://extensions/”在浏览器中进入扩展页面点击“loadedUnpackedextension...”按钮，选择vue-devtools>shells下的chrome文件夹。如果您没有看到“加载解压的扩展...”按钮，您需要检查“开发者模式”。方法二：提供一个4.1.4版本的下载地址链接：https://pan.baidu.com/s/1B1QhnXBvVLnuSFrnDYbs5A提取码：rq9c提示打开chrome扩展，将下载的文件拖进去，即可安装。安装成功如下图所示。使用vue-devtools后需要关闭浏览器再重新打开才能使用浏览器打开vue项目。按F12后，选择vue，就可以使用了。vue是数据驱动的，所以可以看到对应的数据，方便我们调试4.vue-cli的安装和使用安装vue-clinpminstall@vue/cli-g创建项目vuecreate<项目名>//文件名不支持驼峰（包括大写字母）具体操作如下：1.选择一个预设（preset）①除了最后两个选项，其他选项都是你之前保存的预设配置（第一个下图中的“my-default”是之前保存的预设配置，现在可以直接使用）②如果没有保存过配置，只有下面两个选项：default(babel,eslint)：默认设置(直接输入）适用于快速创建新项目的原型，没有任何辅助功能的npm包手动选择功能：自定义配置（按方向键↓）是我们需要的面向生产的项目，一个npm包提供可选功能2.自定义配置n需要选择您需要的配置项？查看你的项目需要的特性:>()Babel//Transcoder，可以将ES6代码转换成ES5代码，使其可以在现有环境中执行。()TypeScript//TypeScript是JavaScript（后缀.js）的超集（后缀.ts），包含并扩展了JavaScript的语法。它需要被编译并输出为JavaScript才能在浏览器中运行。目前很少有人使用()ProgressiveWebApp(PWA)Support//ProgressiveWebApplication()Router//vue-router（vue路由）()Vuex//vuex（vue的状态管理模式）()CSSPre-processors//CSS预处理器(eg:less,sass,stylus)()Linter/Formatter//代码风格检查和格式化(eg:ESlint)()UnitTesting//单元测试(unittests)()E2ETesting//e2e(endtoend)测试3.选择对应功能的具体工具包①是否使用historyrouterVue-Router利用浏览器自身的hash模式和history模式的特点实现前端路由（通过调用浏览器提供的接口)②css预处理器主要是解决浏览器对css的兼容性，简化css代码等③ESLint：提供插件式javascript代码检测工具，ESLint+Prettier//用的比较多④Whentodetect：保存或提交链接检查时单元测试？选择一个单元测试解决方案：（使用方向键）Mocha+Chai//mocha很灵活，只提供了一个简单的测试结构。如果需要其他功能，需要添加其他库/插件来完成。全局环境必须安装>Jest//安装配置简单，使用方便。内置伊斯坦布尔，可以查看测试覆盖率。与Mocha相比：配置简单，测试代码简单，易于与babel集成，内置丰富的expect⑤如何存储配置：⑥是否保存本次配置（y：记录本次配置，然后需要命名；n：此配置不记录）⑦构建完成：按照提示启动项目可视化项目vueui目录结构|--src//源码目录||--组件//vue公共组件||--router//vue的路由管理||--App.vue//页面入口文件||--main.js//程序入口文件，加载各种公共组件|--public//静态文件，比如一些图片，json数据等||--favicon.ico//图标文件||--index.html//入口页面|--vue.config.js//是一个可选的配置文件，包括大部分vue项目配置|--.babelrc//ES6语法编译配置|--.editorconfig//定义代码格式|--.gitignore//git上传忽略的文件格式|--.postcsssrc//postcss配置文件|--README.md//项目描述|--package.json//的基本信息项目，包依赖信息等，根据需要在根目录下新建vue.config.js自行配置，eg：（简单配置，更多配置详情参考官网：https:///cli.vuejs.org/zh/config/)module.exports={baseUrl:'/',//部署应用时的根路径（默认'/'），也可以使用相对路径（有用法restrictions)outputDir:'dist',//运行时生成的生产环境构建文件的目录（默认''dist''，构建前会清空）assetsdir:'',//放置生成的静态资源（s,css,img,fonts）（相对于outputDir）目录（默认''）indexPath:'index.html',//指定生成在dex.html的输出路径（相对于outputDir）也可以是绝对路径pages:{//pages中配置的路径和文件名必须存在于你的文档目录中，否则启动服务时会报错',//页面入口，每个“页面”应该有对应的JavaScript入口文件title:'IndexPage',//使用title选项时，在模板中使用：
