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文件的结构

2. 自己写vue组件

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

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

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

3. 重新启动项目

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