vue开发学习---2

    上次《 vue开发学习---1》里面已经有相关的安装项目步骤,本次我们主要讲的是如何删除多余目录并建立好自己的路由配置,如有不足,请多多指教:(最近略忙,趁今天有空,我们继续接下去写)

    我们先明确一下我们项目的目录结构:


    按照之前的顺序创建好项目后,我们开始删除多余的文件,建立自己所需的文件:

    根据上图我们可以将HelloWorld这个组件的相关文件删除,重现建立我们需要的路由和组件配置:

删除完后:


我们可以建立一个登陆的页面以及相关路由配置,不过在此之前我们先配置一下我们css的写法,这里我采用的是sass的写法,所以我们先安装sass依赖支持:

在相关的项目配置下找到package.json所在的目录文件,在与他同级的结构下执行:

npm install node-sass --save-dev
npm install sass-loader --save-dev

执行完后,我们就可以在package.json看到


的配置,我们开始建立一个login登录的路由

可如下配置,实现js/css/html分离式开发:




    路由配置:



然后运行,就可以看到我们的页面了:


项目地址:https://gitee.com/leidongmei/vue_learning.git

    

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值