1.进入VScode界面 点击文件->首选项->用户片段 选择新建全局代码片段文件 命名为vue.json2.在文件中粘贴以下代码{ "Print to console": { "prefix": "vue", "body": [ " <div id=\"app\">", " <h2>{{msg}}</h2>", "
1、
Vue.js
是什么
Vue
(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
Vue
的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，
Vue
也完全能够为复杂的单页应用提供驱动。
官方网站：https://cn.
vue
js.org
2、初始
Vue.js
创建
demo.html...
Vue.js
是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，
Vue
采用自底向上增量开发的设计。
Vue
的核心库只关注视图层，并且非常容易学习，是一个基于MVVM结构的轻量级框架，非常容易与其它库或已有项目整合。
安装
vue
需要借助npm指令集，所以一般会先安装node.js环境。
一 下载node.js环境
打开node.js的官网下载地址：http://nodejs.cn/download/
选择适合自己系统的安装包，本文以windows x64系统为例。
下载安装包后正
第一步：ctrl+shift+p调出控制台，并输入snippets,在弹出的选项
中
选择Preferences:Configure User Snippets
第二步：在选项
中
找到html,之后
vsCode
会生成一个html.json文件，接下来就可以在里面输入我们需要
创建
的
模板
第三步：输入
模板
，格式如下：（$0代表光标所在的位置）
"Print to console": {
"prefix": "
vue
",
"body": [
" <div id=\"app\">",
2、
VScode
官网下载地址
VScode
下载
安装完
VScode
后再安装
vue
插件vetur和ESLint，实现支持
vue
文件的代码高亮
安装插件：点击左边的Extensions图标，输入vetur，找到高版本的安装即可（同样方式安装ESLint插件）
安装好插件看到的代码如下图所示：
安装好的
VScode
是英文版的，想
// Place your snippets for
vue
here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the
VScode
入门（3）：为什么在
vscode
中
使用
vue
，data里的数据不能够在代码
中
调用！！！
这是我第一次使用
Vscode
，写了一些代码，我看了也没有什么错误。
直接上图:
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.
建立多个
Vue
实例
对象
这里在同一个js文件
中
创建
了两个
Vue
实例
对象
，它们各自能完成前面学的那些功能，同时使用
对象
名称也可以互相访问，协同实现一些功能。
index.html
&lt;!DOCTYPE html&gt;
&lt;html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"&gt;
1. 在终端
中
使用 npm 安装
Vue.js
：npm install
vue
2. 在 VS Code
中
创建
一个新的
Vue.js
项目：
vue
create my-project
3. 在 VS Code
中
打开项目文件夹：File -> Open Folder
4. 在项目文件夹
中
找到 main.js 文件，添加以下代码：
import
Vue
from '
vue
'
import App from './App.
vue
'
new
Vue
({
render: h => h(App),
}).$mount('#app')
5. 在项目文件夹
中
找到 App.
vue
文件，添加以下代码：
<template>
<h1>{{ message }}</h1>
</template>
<script>
export default {
data() {
return {
message: 'Hello
Vue.js
!'
</script>
6. 在终端
中
运行项目：npm run serve
7. 在浏览器
中
打开 http://localhost:808，您应该能够看到 "Hello
Vue.js
!" 的消息。
希望这可以帮助您引入
Vue.js
代码！
