Vue基本概念介绍及vue-cli环境搭建

1 js中初始化一个Vue对象，传的参数就是对象属性。 挂载点、模板、实例之间的关系。

var vm = new Vue({
        el:"#app",
        template:'<div> {{fruit}}</div>',
        data:{
            fruit:"apple"
        }
    })

el :定位视图位置进行挂载。挂载点。

template:将要挂载的模板，挂载点下的展示内容。

data:该组件将要使用的数据。

 

2 一般的组件引入过程

 

 

 

3 是用脚手架初始化一个项目

3.1 构建本地vue开发环境，

1 安装nodejs
2 安装国内cnpm 镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org

3  最新稳定版 vue
cnpm install vue

4 全局安装 vue-cli
cnpm install --global vue-cli 

5 安装webpack
npm install webpack -g

 

3.2 使用脚手架初始化项目

//基于 webpack 模板的新项目，到目标目录中打开控制台窗口

vue init webpack my-project 


// 进入项目所在目录

cd my-project

// 安装
cnpm install 

// 运行,在本地启动测试服务器，默认热启动模式
npm run dev

// 生成上线目录
npm run build

 

3.3 目录说明，我们开发的目录是在src,src中包含下面的目录 

• assets:存放图片等资源
• components:存放一个组件文件
• App.vue:项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录
• main.js:项目核心文件