有时候使用npm i node-sass -D
装不上,这时候,就必须使用 cnpm i node-sass -D
运行cnpm i vue -S
将vue安装为运行依赖;
运行cnpm i vue-loader vue-template-compiler -D
将解析转换vue的包安装为开发依赖;
运行cnpm i style-loader css-loader -D
将解析转换CSS的包安装为开发依赖,因为.vue文件中会写CSS样式;
在webpack.config.js
中,添加如下module
规则:
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader'] },
{ test: /\.vue$/, use: 'vue-loader' }
]
}
App.js
组件页面:
这是APP组件 - {{msg}}
我是h3
main.js
入口文件:
// 导入 Vue 组件
import Vue from 'vue'
// 导入 App组件
import App from './components/App.vue'
// 创建一个 Vue 实例,使用 render 函数,渲染指定的组件
var vm = new Vue({
el: '#app',
render: c => c(App)
});
webpack.config.js
中添加resolve
属性:resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
使用 export default
和 export
导出模块中的成员; 对应ES5中的 module.exports
和 export
使用 import ** from **
和 import '路径'
还有 import {a, b} from '模块标识'
导入其他模块
使用箭头函数:(a, b)=> { return a-b; }
vue-router官网
import VueRouter from 'vue-router'
Vue.use(VueRouter);
import login from './components/account/login.vue'
import register from './components/account/register.vue'
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/login' },
{ path: '/login', component: login },
{ path: '/register', component: register }
]
});
var vm = new Vue({
el: '#app',
// render: c => { return c(App) }
render(c) {
return c(App);
},
router // 将路由对象,挂载到 Vue 实例上
});
router-link
和router-view
:
登录
注册
Github 仓储地址
Mint-UI官方文档
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
primary
官网首页
文档地址
import '../lib/mui/css/mui.min.css'
webpack.config.js
中添加新的loader规则:
{ test: /\.(png|jpg|gif|ttf)$/, use: 'url-loader' }
点击头像 -> 修改资料 -> SSH公钥 如何生成SSH公钥
创建自己的空仓储,使用 git config --global user.name "用户名"
和 git config --global user.email ***@**.com
来全局配置提交时用户的名称和邮箱
使用 git init
在本地初始化项目
使用 touch README.md
和 touch .gitignore
来创建项目的说明文件和忽略文件;
使用 git add .
将所有文件托管到 git 中
使用 git commit -m "init project"
将项目进行本地提交
使用 git remote add origin 仓储地址
将本地项目和远程仓储连接,并使用origin最为远程仓储的别名
使用 git push -u origin master
将本地代码push到仓储中
头部的固定导航栏使用 Mint-UI
的 Header
组件;
底部的页签使用 mui
的 tabbar
;
购物车的图标,使用 icons-extra
中的 mui-icon-extra mui-icon-extra-cart
,同时,应该把其依赖的字体图标文件 mui-icons-extra.ttf
,复制到 fonts
目录下!
将底部的页签,改造成 router-link
来实现单页面的切换;
Tab Bar 路由激活时候设置高亮的两种方式:
.router-link-active{
color:#007aff !important;
}
new VueRouter
的时候,通过 linkActiveClass
来指定高亮的类:
// 创建路由对象
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/home' }
],
linkActiveClass: 'mui-active'
});
将 tabbar 改造成 router-link
形式,并指定每个连接的 to
属性;
在入口文件中导入需要展示的组件,并创建路由对象:
// 导入需要展示的组件
import Home from './components/home/home.vue'
import Member from './components/member/member.vue'
import Shopcar from './components/shopcar/shopcar.vue'
import Search from './components/search/search.vue'
// 创建路由对象
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/home' },
{ path: '/home', component: Home },
{ path: '/member', component: Member },
{ path: '/shopcar', component: Shopcar },
{ path: '/search', component: Search }
],
linkActiveClass: 'mui-active'
});
lunbo: [
'http://www.itcast.cn/images/slidead/BEIJING/2017440109442800.jpg',
'http://www.itcast.cn/images/slidead/BEIJING/2017511009514700.jpg',
'http://www.itcast.cn/images/slidead/BEIJING/2017421414422600.jpg'
]
.vue
组件中使用vue-resource
获取数据运行cnpm i vue-resource -S
安装模块
导入 vue-resource 组件
import VueResource from 'vue-resource'
Vue.use(VueResource);