Vue之cli

使用vue-cli的目的:

  1. 生成目录结构
  2. 本地开发调试
  3. 代码部署
  4. 热加载(实时更新浏览器)
  5. 单元测试

搭建编程环境。

安装条件:Node.js版本要大于6.0。npm大于3.0(Node.js大于6.0的版本 里面npm版本大于3.0)。还有Git

详情见:https://github.com/vuejs/vue-cli/tree/master

安装Node环境http://nodejs.cn/

安装Git(VScode安装过了)

三种模板选择:

官方模板。自定义模板。本地模板

下面在安装好Node和Git后 调用windows的cmd

五个箭头分别表示:

1,返回桌面。

2,下载vue模板(webpack-simple这个模板)文件夹命名为 vue-bai

3,确认项目名字(不写默认文件夹名称)

4,项目描述(默认不修改)

5,确认邮箱(Git添加的Github的注册邮箱)

6,MIT是默认的证书。一般不需要修改

通过以上简单操作安装完成。桌面出现了一个新文件夹。名为vue-bai

接下来我们就要安装开发中的各种依赖

1,进入需要安装依赖的文件夹(我们刚刚配置下载的模板)

2,下载依赖

最后就是运行测试服务器。npm run dev  默认端口为8080

现在我们可以在src文件写我们需要的代码了

 

未完待续。。。。。。

关于配置文件解读

定义组件:(首先我引入了bootstrap框架)

在src中创建一个vue文件:创建了一个Balert.vue文件 

 引入组件和注册组件:

在main.js文件中 

引入Balert组件:import Balert from './Balert.vue'

然后注册组件:Vue.component("app-alert",Balert)  // 标签名为app-alert  

完成以上操作。一个单页组件就完成了!

我们可以在单页面组件引入子组件。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值