Vue学习系列 - 项目结构解析（一）

Vue作为一个优秀的前端框架，是不能被忽视的，所以我自然也要接触一下啦。

项目解析

vue环境搭建

1、安装node.js

• 进入Node.js的官网进行下载。

• 进行安装，安装完成后查看版本：

node -v # mode的版本
npm -v #npm的版本

2、安装 淘宝镜像（cnpm）

npm install -g cnpm --registry=https://registry.npm.taobao.org

3、更新npm版本到最新

npm install npm -g

4、全局安装 vue-cli

npm install --global vue-cli

5、安装webpack

npm install webpack -g

用WebStorm搭建框架

1. 新建一个vue项目

2. vue项目的结构

等待项目创建完毕后，我们看一下项目的结构：

项目的结构很简单：

• public文件夹：项目入口html文件和项目ico图标
• src文件：项目根目录（直接在上面存放vue项目根组件和vue项目入口js文件）
• src下的assects文件：公共资源目录
• src下的components文件：项目开发的vue组件

3. 运行项目

直接点击运行就可以了：

在控制台输出访问地址

可以直接点击用默认浏览器打开：

添加一个自己的页面

1. .vue文件的结构

<template>  
  //template 则代表它的 html 结构
  //我们一般是新建一个<div></div>标签，然后把页面相关信息放到里面
</template>  
  
<script>  
  //这里可以引入其他的vue组件
  import Header from '../header.vue'
  export default {  
    // 这里写你的代码，外面要包起来。
    name: "FirstPage",
    props: {
      //接受的从父组件传递过来的参数列表
      isCreating: { //参数名称
        type: Boolean, //类型
        required: true, //是否必传
        default: false, //默认值
      },
    },
    components: {
      //这里写上面我们引入的其他的vue组件名称，多个用逗号隔开
      Header
    },
    data () {
      return{
        //这里写我们的数据
        msg: ''
      }
    },
    methods: {
      //这里写该页面的方法
    }
  }  
</script>  
  
<style scoped>  
  //这里是写样式的
</style>

2. 自己写vue组件

• 首先我写了一个vue组件，里面有一个输入框并且进行了输入绑定

<template>  
    <div id="first">  
        <label> 
            <input v-model="msg" placeholder="写点什么吧...">  
        </label> 
        <p class="p"> 显示输入内容：{{msg}} </p>  
    </div>
</template>  

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

<style scoped>  
    .p{  
    color: red;  
    size: 20px;  
    }  
</style>

• 然后我需要在App.vue项目根组件里面引入我写的页面

// 引入分为三步
// 1. 在script标签中引入该组件
import FirstPage from "@/components/FirstPage";
// 2. 在components里面添加上面组件的名称
components: {   
  FirstPage  
}
// 3. 在template标签中使用该标签
<FirstPage/>

3. 重新启动项目

看到自己写的组件已经成功加载到页面上了，大功告成！