文章目录
1.下载VSCode
从官网下载VSCode,并按下一步安装成功。
2.修改语言为中文
点击确认修改,如下图所示:
或者打开命令面板:输入Configure Display Language
,然后选择zh-cn
,然后重启即可。
3.辅助插件列表
1.vetur(vue2文件基本语法的高亮插件)
2.ESLint(智能错误检测插件)--但是语法检测比较严格哦。
3.Auto Close Tag(自动闭合HTML/XML标签)
4.Auto Rename Tag(自动完成另一侧标签的同步修改)
5.JavaScript(ES6) code snippets(ES6语法智能提示以及快速输入,除js外还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间)
6.Vue VSCode Snippets(新生成页面时,可快速提供一个初始化的结构)
7.Vue - Official
8.Prettier 代码格式化
9.WindiCSS intelliSense css样式工具
10.Stylelint css 样式检查工具
4.vue3模板文件简单例子
html
<template>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
/*
export default {
name: 'App',
components: {
HelloWorld
}
}*/
export default {
name : "First",
// components 组件注册
components: {
HelloWorld
},
// 注册属性
props: {
name: {
type: String,
default: "父组件"
},
},
created() {
// created 在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图
},
mounted() {
// mounted在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作
},
// data() 为变量赋值等
data() {
return {
msg: "Welcom to FirstApp"
};
},
// methods 编写js函数
methods: {
getMessage(val) {
alert(val);
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
5.总结
安装完软件和插件之后,就可以在vscode环境下编写vue3项目代码文件,然后在控制台中进行代码编译,最后在浏览器中调试,运行。确认无bug之后,然后发布成html项目。