vue开发学习---2

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

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

vue开发学习---2

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

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

删除完后:

vue开发学习---2

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

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

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

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

vue开发学习---2

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

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

vue开发学习---2



    路由配置:

vue开发学习---2


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

vue开发学习---2

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