VUE学习笔记——自动生成基于VUE.JS单页应用的脚手架项目（三）

接上一篇，本文主要介绍一下怎么修改文件

在建立好项目后，我们用微软的VS CODE来打开项目文件夹

打开成功后，可以看到文件夹中的内容

打开App.vue，我们可以看到这是一个单文件组件。在VUE的开发中，单文件组件包含了模板类（template）、脚本（scriot）、样式（style）在一个文件当中。

下面举个例子

1.在components文件夹中，新建一个组件Hello.vue

2.然后在Hello.vue里面输入以下内容

<template>
    <h3>{{message}}</h3>
</template>
<script>
export default {
    data(){
        return{
            message: '书山有路勤为径，学海无涯苦作舟！'
        }
    }
}
</script>

3.如果不替换App.vue，就直接在里面进行引入

把原来的import HelloWorld from './components/HelloWorld.vue'注释掉，然后输入新的引入地址。其中，可以用@来简化src目录，后缀“.vue”也可以省略，因为之前已经配置好了，系统会自动添加。

把HelloWorld注释掉，把Hello组件进行注册，最后script变为如下所示

把<HelloWorld msg="Welcome to Your Vue.js App"/>删除，把Hello作为自闭合元素，最后改为如下所示

其他不用再改了。然后在菜单里直接选择“终端”->“新终端”，在命令窗口中输入npm run serve 运行服务

npm run serve

成功后，再浏览器中输入访问地址或者按住Ctrl再鼠标左键单击地址，打开浏览器

http://localhost:8080/

然后就看到成功后的界面了

另外，再说一下package.json文件

    "serve": "vue-cli-service serve",

    "build": "vue-cli-service build",

    "lint": "vue-cli-service lint"

这些是生命周期中用到的命令，之前已经用过的事serve

要注意dependencies是生产环境下打包的依赖项，devDependencies是开发环境下的依赖项。在安装依赖项的时候要注意。

• 在生产环境下安装依赖项的方法（比如要安装XXX插件）：

在命令行中输入 npm install XXX -S

• 在开发环境下安装依赖项的方法（比如要安装XXX插件）：

在命令行中输入 npm install XXX -D