标题
1 vscode-settings.json 自己
{
// 換行
"editor.wordWrap": "on",
// 是否允许自定义的snippet片段提示
"editor.snippetSuggestions": "top",
// vscode默认启用了根据文件类型自动设置tabsize的选项 不檢查縮進，保存后統一按設置項來設置
"editor.detectIndentation": false,
// 重新设定tabsize 代码缩进修改成4个空格
"editor.tabSize": 2,
// #每次保存的时候自动格式化
"editor.formatOnSave": false,
// #每次保存的时候将代码按eslint格式进行修复 使用eslint 風格使用standard 進行代碼規則限制
"editor.fontWeight": "200",
"editor.formatOnType": false,
"workbench.iconTheme": "vscode-icons-mac",
"git.confirmSync": false,
"team.showWelcomeMessage": false,
"window.zoomLevel": 0,
"editor.renderWhitespace": "boundary",
"editor.cursorBlinking": "smooth",
"editor.minimap.enabled": true,
"editor.minimap.renderCharacters": false,
"window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
"editor.codeLens": true,
//eslint 代码自动检查相关配置
"eslint.enable": true,
"eslint.run": "onType",
"eslint.options": {
"configFile": "D:/.eslintrc.js",
"plugins": [
"html"
],
"extensions": [
".js",
".vue"
]
},
"eslint.validate": [
"javascript",
"javascriptreact",
"html",
"vue"
],
// #让prettier使用eslint的代码格式进行校验
"prettier.eslintIntegration": true,
// #去掉代码结尾的分号
"prettier.semi": true,
// #使用带引号替代双引号
"prettier.singleQuote": true,
// #让函数(名)和后面的括号之间加个空格
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
// #这个按用户自身习惯选择 html格式化
"vetur.format.defaultFormatter.html": "js-beautify-html",
// #让vue中的js按编辑器自带的ts格式进行格式化
"vetur.format.defaultFormatter.js": "vscode-typescript",
"explorer.confirmDelete": false,
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
// #vue组件中html代码格式化样式
}
},
// 格式化stylus, 需安装Manta's Stylus Supremacy插件
"stylusSupremacy.insertColons": false, // 是否插入冒号
"stylusSupremacy.insertSemicolons": false, // 是否插入分好
"stylusSupremacy.insertBraces": false, // 是否插入大括号
"stylusSupremacy.insertNewLineAroundImports": false, // import之后是否换行
"stylusSupremacy.insertNewLineAroundBlocks": false, // 两个选择器中是否换行
"files.associations": {
"*.cjson": "jsonc",
"*.wxss": "css",
"*.wxs": "javascript",
"*.vue": "html"
},
"emmet.includeLanguages": {
"wxml": "html",
"vue-html": "html",
"vue": "html"
},
"minapp-vscode.disableAutoConfig": true,
"window.menuBarVisibility": "visible",
"git.enableSmartCommit": true,
"git.autofetch": true,
"liveServer.settings.donotShowInfoMsg": true,
"[html]": {
"editor.defaultFormatter": "vscode.html-language-features"
},
"javascript.updateImportsOnFileMove.enabled": "always",
"workbench.colorTheme": "SynthWave '84",
// 字體大小
"editor.fontSize": 15,
// 設置行高
"editor.lineHeight": 20,
"search.followSymlinks": false,
"workbench.sideBar.location": "left",
"vscode_custom_css.policy": true,
"vscode_custom_css.imports": [
"file:///C:/vscode-transparent/synthwave84.css",
"file:///C:/vscode-transparent/toolbar.css",
"file:///C:/vscode-transparent/vscode-vibrancy-style.css",
"file:///C:/vscode-transparent/enable-electron-vibrancy.js"
],
// 高亮的颜色，emm暂时只支持这样写
"wxmlConfig.activeColor": {
"color": "#e5c07b"
},
// 是否禁用高亮组件
"wxmlConfig.activeDisable": false,
// 是否开启保存自动格式化
"wxmlConfig.onSaveFormat": false,
"wxmlConfig.format": {
"brace_style": "collapse",
"end_with_newline": false,
"indent_char": "",
"indent_handlebars": false,
"indent_inner_html": false,
"indent_scripts": "keep",
"indent_size": 2,
"indent_with_tabs": false,
"max_preserve_newlines": 1,
"preserve_newlines": false,
"wrap_attributes": "force-expand-multiline"
},
// 高亮所忽略的组件数组
"wxmlConfig.tagNoActiveArr": [
"view",
"button",
"text",
"icon",
"image",
"navigator",
"block",
"input",
"template",
"form",
"camera",
"textarea"
],
"zenMode.restore": true,
"breadcrumbs.enabled": true,
"terminal.integrated.shell.windows": "C:\\WINDOWS\\System32\\WindowsPowerShell\\v1.0\\powershell.exe",
"[wxml]": {
"editor.defaultFormatter": "qiu8310.minapp-vscode"
},
"gitlens.advanced.messages": {
"suppressLineUncommittedWarning": true
},
"javascript.format.placeOpenBraceOnNewLineForControlBlocks": true,
"editor.formatOnPaste": false,
"vsicons.presets.hideFolders": true,
"editor.cursorStyle": "line-thin",
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"terminal.integrated.rendererType": "dom",
"vscode_vibrancy.opacity": 1,
"npm.fetchOnlinePackageInfo": false,
"editor.quickSuggestions": null,
"open-in-browser.default": "chrome",
"[jsonc]": {
"editor.defaultFormatter": "vscode.json-language-features"
}
}
2.插件
3.vue提示插件
4.浏览器安装vue插件
vue插件
在chrome中新开一个TAB，输入：chrome://extensions/ 回车
5.VScode 之快速创建vue模板
- 插件库中搜索Vetur安装，识别vue文件
- 新建代码片段
- 文件–>首选项–>用户代码片段–>点击新建代码片段–取名vue.json 确定
- 在json文件中添加自己的模板字段
// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
// Placeholders with the same ids are connected.
// Example:
// "Print to console": {
// "scope": "javascript,typescript",
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
{
"Print to console": {
"prefix": "vue",
"body": [
"<!-- $1 -->",
"<template>",
"<div>$5</div>",
"</template>",
"",
"<script>",
"//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
"//例如：import 《组件名称》 from '《组件路径》';",
"",
"export default {",
"//import引入的组件需要注入到对象中才能使用",
"components: {},",
"data() {",
"//这里存放数据",
"return {",
"",
"};",
"},",
"//监听属性 类似于data概念",
"computed: {},",
"//监控data中的数据变化",
"watch: {},",
"//方法集合",
"methods: {",
"",
"},",
"//生命周期 - 创建完成（可以访问当前this实例）",
"created() {",
"",
"},",
"//生命周期 - 挂载完成（可以访问DOM元素）",
"mounted() {",
"",
"},",
"beforeCreate() {}, //生命周期 - 创建之前",
"beforeMount() {}, //生命周期 - 挂载之前",
"beforeUpdate() {}, //生命周期 - 更新之前",
"updated() {}, //生命周期 - 更新之后",
"beforeDestroy() {}, //生命周期 - 销毁之前",
"destroyed() {}, //生命周期 - 销毁完成",
"activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发",
"}",
"</script>",
"<style scoped>",
"//@import url($3); 引入公共css类",
"$4",
"</style>"
],
"description": "Log output to console"
}
}
Springboot Vue Login(从零开始实现Springboot+Vue登录)
6.使用vue-cli创建vue项目
7.cd进入到创建的 Vue 项目目录，添加element依赖框架
cd vue-spring-login-summed (进入到项目根目录)
vue add element (添加 element，一个 element 风格的 UI 框架)
npm install axios (安装 axios，用于网络请求)
npm install vuex --save(安装 Vuex，用于管理状态)
npm install vue-router (安装 路由，用于实现两个 Vue 页面的跳转)
安装element如果在执行时报错：
Vue-cli3 更新 vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.
2.9.6 初始化项目是用 vue init webpack my-project 3.0以上 初始化项目是用 vue create my-project
解决方法：
1.用2.9的命令初始化项目 vue init webpack my-project
2.卸载2.9升级到3.0
npm uninstall -g vue-cli //卸载
npm i -g @vue/cli@^3.12.1 //安装指定版本
npm i -g @vue/cli //安装最新版本
/安装指定版本**/
3.0以下 npm install -g vue-cli@版本号
3.0以上 npm install -g @vue/cli@版本号
7.1运行项目
在 VSCode 菜单栏依次选择：终端 —— 运行任务…
这里使用的是 serve 模式，即开发模式运行的项目
http://localhost:8080/
版权声明：本文为qq53167889原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。