google translate啦啦外卖vue环境部署，啦啦外卖⼆次开发啦啦外卖⼩程序
npm包管理器，是集成在node中的，所以，直接输⼊ npm -v，显⽰出npm的版本信息。
npm
全局安装vue-cliC:\Urs\Administrator>npm install -g vue-cli 或：
C:\Urs\Administrator>npm install --global vue-cli
⽤vue-cli构建项⽬
要创建项⽬，⾸先我们要选定⽬录，然后再命令⾏中把⽬录转到选定的⽬录。
建⼀个基于 webpack 模板的新项⽬ Webpack为构建，vue-project为项⽬名 D:>vue init webpack vue-project⽤vue-cli构建项⽬
如果出现乱码请改变命令⾏窗⼝编码格式：
pul是什么意思
hionD:>chcp 65001
解释⼀下这个命令，这个命令的意思是初始化⼀个项⽬，其中webpack是构建⼯具，也就是整个项⽬是基于webpack的。其中vue-project 是整个项⽬⽂件夹的名称，这个⽂件夹会⾃动⽣成在你指定的⽬录中:
D:>cd vue-project D:\vue-project>查看⽬录结构
安装项⽬所需的依赖
要安装依赖包，⾸先cd到项⽬⽂件夹（vue-project⽂件夹），然后运⾏命令 cnpm install ，等待安装。
安装项⽬所需的依赖everywhere
安装完成之后，会在我们的项⽬⽬录vue-project⽂件夹中多出⼀个node_modules⽂件夹，这⾥边就是我们项⽬需要的依赖包资源。
vue-project⽂件夹
运⾏项⽬
在项⽬⽬录中，运⾏命令 npm run dev ，会⽤热加载的⽅式运⾏我们的应⽤，热加载可以让我们在修改完代码后不⽤⼿动刷新浏览器就能实时看到修改后的效果。
运⾏项⽬
生疏这⾥简单介绍下 npm run dev 命令，其中的“run”对应的是package.json⽂件中，scripts字段中的dev，也就是 node build/dev-rver.js命令的⼀个快捷⽅式。
项⽬运⾏成功后，浏览器会⾃动打开localhost:8080（如果浏览器没有⾃动打开，可以⼿动输⼊）。运⾏成功后，会看到如下所⽰的界⾯。
结果展现三、安装配置vscode
VSCode设置中⽂语⾔环境
使⽤快捷键【Ctrl+Shift+P】
在弹出的搜索框中输⼊【configure language】，然后选择搜索出来的【Configure Display Language】，如下图：
设置语⾔环境
设置语⾔环境
安装简体中⽂
控制器英文Visual Studio Code编辑器在Windows上安装⽐较简单，直接。安装好后⾸次启动配置插件，插件配置必须联⽹，从⽹上下载。如下图点击左侧扩展：
扩展
配置
⽂件->⾸选项->设置
{ “workbench.iconTheme”: “vscode-icons”, “editor.fontSize”: 20, “derIndentGuides”: fal,
“files.autoSave”: “afterDelay”, “ings.formats”:[ { “format”: “expanded”, “extensionName”:“.css”, “savePath”: “/css” }, { “extensionName”: “.min.css”, “format”: “compresd”, “savePath”: “/css” } ], “ludeList”: [ “/node_modules/”, “.vscode/**” ],
“ateMap”: true, “easysass.formats”: [ { “format”: “expanded”, “extension”: “.css”}, { “format”: “compresd”, “extension”: “.min.css” } ], “easysass.targetDir”: “./css/”,
“background.customImages”: [ “file:///D://222.png” ], “background.uDefault”: fal, “background.style”: {“content”: “’’”, “pointer-events”: “none”, “position”: “absolute”, “z-index”: “99999”, “width”: “102%”,“height”: “100%”, “background-position”: “0%”, “background-repeat”: “no-repeat”, “opacity”: 0.3 },
我要射了“editor.quickSuggestions”: { “strings”: true }, “FontSize”: 12, “cssrem.autoRemovePrefixZero”: fal,“cssrem.fixedDigits”: 3, “beautify.language”: { “js”: { “type”: [ “javascript”, “json” ], “filename”: [ “.jshintrc”,“.jsbeautify” ] }, “css”: [ “css”, “scss” ], “html”: [ “htm”, “vue”, “html” ] }, “lorTheme”:
“Dark-Dracula”, “vetur.format.defaultFormatter.html”: “js-beautify-html”}⼆、Vue-cli 项⽬⽬录解析|-- build // 项⽬构建(webpack)相关代码| |-- build.js // ⽣产环境构建代码| |-- check-version.js // 检查node、npm等版本| |-- dev-client.js // 热重载相
cigarette
关| |-- dev-rver.js // 构建本地服务器| |-- utils.js // 构建⼯具相关| |-- f.js // webpack基础配置| |--
f.js // webpack开发环境配置| |-- f.js // webpack⽣产环境配置|-- config // 项⽬开发环境配置| |-- v.js // 开发环境变量| |-- index.js // 项⽬⼀些配置变量| |--
v.js // ⽣产环境变量| |-- v.js // 测试环境变量|--src // 源码⽬录| |-- asts // 资源⽬录 | |-- components // vue公共组件| |-- store // vuex的状态管理| |-- App.vue // 页⾯⼊⼝⽂件| |-- main.js // 程序⼊⼝⽂件，加载各种公共组件|-- static // 静态⽂件，⽐如⼀些图⽚，json数据等| |-- data // 数据|-- .babelrc // ES6语法编译配置|-- .editorconfig // 定义代码格式|-- .gitignore // git上传需要忽略的⽂件格式| |-- .postcssrc.js // 通过JS插件装换样式的⼯具 |-- README.md // 项⽬说明|-- favicon.ico |-- index.html // ⼊⼝页⾯|-- package.json // 项⽬基本信息三、常见问题
Eslint总是报错‘[vue/no-parsing-error] Parsing error: x-invalid-end-tag.’
关闭eslint的检查
glass是什么意思Eslint总是报错
queanplate
解决⽅法
