添加Bootstrap和Sass到项目中
为了美化demo界面引入Bootstrap,将bootstrap在此路径vue-demo1/index.html
文件中用link引入即可:
<link rel="stylesheet" href="/static/css/bootstrap.min.css">
项目内sass预编译的使用
在.vue
组件内部的 style
标签内添加lang="scss"
属性即可 ,scoped
属性是组件独有的意思,
至此就添加完毕了
文件解释
/src/main.js
作为页面的主入口文件,接入整个webapp的router和vuex全局状态管理以及根组件app.vue,以及引入一些全局的插件和组件。
/src/App.vue
作为组件的主入口组件,负责包括页面和复用组件之间的总调用,与router-view一起负责页面的路由切换以及灵活展现
创建页面
在/src/components/
内创建一个navbar.vue
来作为项目的可复用组件。并添加如下代码在template标签
内
1 | <nav class="navbar navbar-inverse"> |
在/src/containers/
内创建一个index.vue
来作为项目的主页面,
并添加如下代码在template标签
内
1 | <div id="container"> |
在script标签
内用import NavBar from '../components/NavBar'
引入组件,
并在components
属性内加载组件,如下代码:
1 | import NavBar from '../components/NavBar' |
在/src/containers/
内创建一个home.vue
来作为项目的子页面。
并添加如下代码在template标签
内
1 | <h1>home</h1> |
在/src/containers/
内创建一个about.vue
来作为项目的子页面。
并添加如下代码在template标签
内
1 | <h1>about</h1> |
至此,页面就创建完毕了。
创建路由
在/src/routes/index.js
文件内routes
添加一条路由记录,
这个记录是一个数组,数组内部包含路由记录对象,这里记住,子路由children是通过组件内部的router-view去嵌套渲染的
1 | const routes = [ |
至此,路由就创建完毕了。
接下来可以运行npm run dev
来查看demo
注:本demo使用的脚手架为:https://github.com/shifeng1993/vue-start