使⽤VisualStudioCode开发Vue
前⾔
本⽂主要介绍在VisualStudioCode下开发Vue。
Nodejs、Npm、Vue的项⽬搭建参考下⾯⽂章。
VSCode配置
⾸先为VSCode增加插件，ctrl+shift+X调出扩展管理界⾯。
Chinese (Simplified) Language Pack for Visual Studio Code：适⽤于 VS Code 的中⽂(简体)语⾔包，此中⽂(简体)语⾔包为 VS Code 提供本地化界⾯。
Code Debugger：⽆需配置launch.json即可进⾏单⽂件调试，点击右上⾓⾍⼦图标或者右键菜单都可以。
禁⽤JS-CS-HTML Formatter：格式化js、CSS、HTML、JSON⽂件。
PS：VSCode⾃带格式化代码功能，快捷键Alt+Shift+F。
Vue开发
⾸先创建⼀个Vue项⽬——vue init webpack KibaProject。
然后使⽤VSCode打开⽂件夹，打开项⽬。
然后到index.html⽂件，这个是我们的起始页⾯。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>homestead_onemap</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Vue是⼀个单页⾯的项⽬，即他只有⼀个Html页⾯，当切换显⽰.vue后缀名的页⾯时，是由vue.js控制，将主页中id为app的div的内容替换为指定的.vue页⾯的内容，.vue⽂件是组件⽂件，默认⽤<template>标签开头结尾，也是为了导⼊时替换html⽅便⽽定义的。替换原理⼤家可以学习⼀下Mustache.js ，现在流⾏的前端框架基本上都是这个模式的，替换html，同时将html内双花括号的内容，替换为实体属性。
main.js：main.js⽂件是项⽬启动⼊⼝，默认创建时，替我们引⼊了App.vue组件(import App from './App')，并局部注册了该组件。
app.vue：系统默认使⽤的组件，div内容被<template>包含，js中定义了⼀个可以被外部访问的默认的
函数(export default)，在这个函数中，可以定义当前组件名，组件的内部页⾯实体(ViewModel)和内部函数，在Vue中，组件与组件之间是解耦的，即在其他组件中定义同名属性和函数，也不影响当前页⾯。也就是说，在使⽤该组件替换Index.html中id为app的div的内容时，组件可以正常使⽤组件页⾯内定义的实体和事件函数。
新建Vue组件
系统创建时，会默认创建⼀个HelloWorld.vue组件，但⾥⾯内容⽐较多，我们稍微修改⼀下让它简单点，代码如下：
<template>
<div>
<div>
<h1>I am HelloWorld.</h1>
</div>
<div v-on:click="click">click</div>
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
msg: "HelloWorld_msg",
};
},
methods: {
click: function () {
this.msg = "kiba";
},
},
};
</script>
<style>
</style>
如代码所⽰，简单定义⼀个ViewModel，然后在html中输出属性msg。
然后我们再定义⼀个FirstComponent，代码如下：
<template>
<div>
<h1>I am FirstComponent.</h1>
</div>
</template>
<script type="text/javascript">
export default {};
</script>
路由编写—Router
组件编写完，我们进⼊Router/index.js页⾯，先引⼊我们刚创建的两个组件，然后修改路由列表routes，如下图：
路由展⽰—router-view
路由编写完，我们进⼊到App.vue页⾯，页⾯创建时⾃带了<router-view />，现在我们增加两个router-link，⽤来导航<router-view />，修改代码如下：
<template>
<div id="app">
<p>{{ App_msg }}</p>
visual studio和vs code的区别<p><router-link to="/">firstcomponent</router-link></p>
<p><router-link to="/HelloWorld">HelloWorld</router-link></p>
<router-view />
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
msg: "App_msg",
};
},
methods: {
click: function () {},
},
};
</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>
代码编写好，我们运⾏F5，启动调试页⾯，页⾯如下：
路由切换已经实现。
终端
我们除了使⽤VSCode的调试，还可以使⽤终端调试，我们可以新建终端，如下图：
然后下⽅会弹出⼩界⾯，我们可以在界⾯⾥输⼊，npm run dev。
第⼀次运⾏会报错，因为我们命令编译和VSCode编译⽤的配置⽂件不⼀样。
现在我们修改命令编译的配置⽂件build/f.js。
注释如下代码，如图：
然后在终端⾥Ctrl+c取消当前运⾏，然后再重新运⾏npm run dev。
终端是什么？
终端实际上就是⼀个CMD窗⼝，打开终端时，CMD窗⼝⾃动为我们CD到了我们项⽬的⽂件夹。PS：运⾏npm audit fix可以修复⼀些npm的漏洞
ElementUI
ElementUI和Vue结合的很紧密，这么简单使⽤⼀下。
⾸先安装ElementUI包，打开终端，运⾏下⾯命令。
npm i element-ui -S
然后在main.js⾥引⼊Element的包。
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
然后在new Vue前使⽤ElementUI。
Vue.use(ElementUI)
然后就可以使⽤ElementUI开发了。
PS：npm install命令可以下载和更新package.json中的包。
----------------------------------------------------------------------------------------------------到此，使⽤VisualStudioCode开发Vue就已经介绍完了。
----------------------------------------------------------------------------------------------------
注：此⽂章为原创，任何形式的转载都请联系作者获得授权并注明出处！
若您觉得这篇⽂章还不错，请点击下⽅的【推荐】，⾮常感谢！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。