hualinux 进阶 vue 2.1：vue cli默认项目结构及其vue编写规则

目录

一、vue cli创建vue后的目录结构 

二、vue文件编写规则

2.1 模板template（必须）

2.1.1 使用说明

2.1.2 注意事项

2.2 script代码（可选）

2.2.1 使用说明

2.2.2 data数据的编写

2.2.3 方法methods的编写

2.2.4 组件使用方式

2.3 样式style编写

三、例子

四、小结

---

前面我们讲了使用vue cli安装vue，这章讲使用vue cli安装vue后，如何编写vue代码，和之前<script>导入vue.js文件有些出入。

一、vue cli创建vue后的目录结构 

上一章讲了使用vue cli创建了一个名为myvue的工程，完成后的目录结构如下：

我在这里做一个简单的说明

node_modules目录：这个是项目相关的依赖包，看名字就知道了，是自动添加的不用理它

public目录：公共目录，主要是对外访问的。对外开放。

• favicon.ico：图标
• index.html：主页，项目入口。里面添加有<script>引用标签，这样就可以使用vue了。

src目录：Source Code File（源代码文件）目录，主要是放vue源码的，不对外开放

• assets目录：资源文件。一般用于存放需要用到的资源文件，图片居多
• components目录：组件，主要是放vue组件
• App.vue文件：vue根组件。一个vue页面一把又三个部分组成：【template】，【script】，【style】。
• main.js文件：程序入口文件。定义的实例都挂载到根节点下，内容通过vue组件来填充

.gitignore文件：git上传忽略配置文件。可以指定哪些文件或目录不要上传到git服务器中。

babel.config.js文件：Babel 配置文件

package.json文件：项目基本信息。

什么是Node.js的模块（Module）？在Node.js中，模块是一个库或框架，也是一个Node.js项目。Node.js项目遵循模块化的架构，当我们创建了一个Node.js项目，意味着创建了一个模块，这个模块的描述文件，被称为package.json。

每个项目的根目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。npm install命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。

package-lock.json：包锁死，主要是指定版本。

README.md：使用说明文档

PS：项目加载的过程是index.html->main.js->app.vue->index.js->helloworld.vue

目前我们主要是用src源文件操作，其它不用管，等会使用时，有兴趣可以搜索一下。

src中我们着重App.vue和components组件目录中编写组件。

二、vue文件编写规则

一个vue页面一把又三个部分组成：template，script，style，其中后面2个不是必须的。

2.1 模板template（必须）

2.1.1 使用说明

使用vue-cli构建vue项目的好处就是方便，不用再去声明什么创建模板之类的语句，可以直接写模板内容了

模板template编写和<script>导入的vue.js文件一样，只不过是不用引号，自动度更大，直接写模板就行了，比如App.vue文件中的模板字段

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

这里不用引号了，可以写的东西更多。

2.1.2 注意事项

和使用<script>标签导入的vue.js文件后，使用的模板一样，模板标签下只能有一个二级标签，一般使用<div>也可以是其它。

2.2 script代码（可选）

2.2.1 使用说明

该部分用于编写JavaScript代码片段，用export default导出。

<script>
export default {
  //代码，这里面可以写vue实例的参数比如data、method等
}
</script>

在export default{..}中可以写像<script>导入的vue.js所创建的vue实例中的参数，如data、method

2.2.2 data数据的编写

这里编写data数据，要用函数式方式，不能像 new Vue中的data那样的写法。

比如new Vue中data写法为：

data: {
            msg: "vue"
        }

使用.vue文件方式写法是用函数方式，返回对象，代码如下：

data: function (){
    return{
      msg:'vue'
    }
  }

一般function名字可以省略，写成 “data()”，如下面js脚本的代码  

<script>
export default {
  name: 'App',
  data(){
    return{
      msg:'vue'
    }
  }
}
</script>

2.2.3 方法methods的编写

方法的编写与使用new Vue写法是一样的。比如

 methods:{
    test(){
      alert("这是一个测试")
    }
  }

2.2.4 组件使用方式

组件方式，因为是分离了，独立一个目录专门放组件 ，所以用 import引入方式，比如App.vue中

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

improt <名字> from <路径>

2.3 样式style编写

样式编写与css一样在<styple></styple>标签中间编写即可，如app.vue中的例子

<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>

PS：如果此样式只在本组件中生效，可以添加一个scoped属性

<style scoped>
...
</style>

三、例子

像普通例子那个，打印了个hello vue，先看App.vue代码，其中脚本部分

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

知道导入了helloWorld这个组件，把它当成子组件，所以我们只需要修改一下HelloWord.vue即可，变成如下：

<template>
  <div class="hello">
    <h2>{{ msg }}</h2>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data(){
    return{
      msg:'hello vue'
    }
  }
}
</script>

 运行vue后效果如下：

四、小结

.vue后缀文件格式，包括vue组件，主要是模板<template>、脚本<script>、样式<style>这3个标签，一般形式如下：

<!-- 模板，一般要求写上-->
<template>
<!-- 模板中要求只有一个二级标签，一般用div包含起来-->
  <div id="xxx">
    …
  </div>
</template>

<!--可以省略，比如写router的view -->
<script>
<!--导出组件对象，可以使用 import 导入，只能有一个 -->
export default {
<!--data原来是对象，现在要改用函数式方式 -->
  name: 'hello',
  data() {
    return {
      msg: 'hello vue'
    }
  },
 methods:{
    test(){
      alert("这是一个测试")
    }
  }
…
}
</script>

<!-- 这里编写格式表， 可以省略不写-->
<!-- 如果是组件，只对本组件生效，可以写成<style scoped> -->
<style>
…
</style>