参考上面的博客
https://blog.csdn.net/mao834099514/article/details/79138484
由于项目需要，需要掌握Vue开发，所以决定用vscode搭建一个开发环境。
第一步：下载nodejs，官网地址
直接默认安装即可。
检查nodejs与npm安装情况
node -v
输入npm -v
安装cnpm的源
npm install -g cnpm --registry=http://registry.npm.taobao.org
第二步：安装vscode和谷歌浏览器
这里直接跳过
第三步：配置环境
安装插件
再配置调试环境
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
},
{
"name": "Launch index.html (disable sourcemaps)",
"type": "chrome",
"request": "launch",
"sourceMaps": false,
"file": "${workspaceRoot}/hello.html" //每次需要修改这里的文件地址
}
]
}第一个需要设置IIS服务器，第二个可以直接运行文件。
第四步，下载vue.js
https://unpkg.com/vue/dist/vue.min.js
第五步，实例代码结果展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 示例</title>
</head>
<body>
<div id="app">
<input type ="text" v-model ="name" placeholder ="你的名字">
<hl>你好，{{name }}</hl>
</div>
<script src="vue.js"></script>
<script>
var app =new Vue({
el:'#app',
data: {
name: ''
}
})
</script>
</body>
</html>效果如下：
扫一扫
1722
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
