Vue项目创建及单个练习文件新建

起步

在学习vue之前需要安装node（在控制管理器中node -v进行检查，若无版本号，则需要安装）。
1.安装vue-cli 脚手架（仅需安装一次，后续无需安装，下面的二选一即可）

1. npm install -g @vue/cli
2. npm install -g @vue/cli-service-global

一般常用第一个安装即可。
2.新建项目 vue create vue-demo
vue-demo为你的项目名称，在安装时需要等待。
3.选择配置

• Babal代码转义
• Linter代码风格
• 测试

4.启动项目npm run serve
先进入项目cd vue-demo 然后启动项目npm run serve
这里需要你先百度一下设置npm淘宝镜像（安装过就不用安了），这个会增加你在安装其他部分的速度。
启动项目之后，你会看到下图，表示项目创建完成：

项目内现在用的开发工具是VS code。
上面是整个新建项目的阶段。

开发Hello world

尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个.html 文件，然后通过如下方式引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

安装教程给出了更多安装 Vue 的方式。请注意我们不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。
Vue中文官方文档

Hello world：纯浏览器渲染

创建html文件，添加后直接运行：

	<div id="app">{{message}}</div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>

运行结果：

快速原型开发：单个 .vue文件

需要安装 npm install -g @vue/cli-service-global
这里直接创建vue文件，内容为

<template>
    <div>
        {{message}}
    </div>
</template>

<script>
    export default {
        data() {
            return {
                message: "Hello Vue!"
            }
        },
    }
</script>

<style lang="scss" scoped>

</style>

创建完成后，进入该文件目录下，使用vue serve 文件名运行，和上一个文件效果展示一致。

快速创建项目

在起步里已经提到了。
目录结构如下：

入口文件为main.js文件。

创建项目、单个vue文件及测试文件完成。