Vue-cli
注意：
有时候使用npm i node-sass -D装不上，这时候，就必须使用 cnpm i node-sass -D
在普通页面中使用render函数渲染组件
在webpack中配置.vue组件页面的解析
运行
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组件页面：
<template>
<!-- 注意：在 .vue 的组件中，template 中必须有且只有唯一的根元素进行包裹，一般都用 div 当作唯一的根元素 -->
<div>
<h1>这是APP组件 - {{msg}}</h1>
<h3>我是h3</h3>
</div>
</template>
<script>
// 注意：在 .vue 的组件中，通过 script 标签来定义组件的行为，需要使用 ES6 中提供的 export default 方式，导出一个vue实例对象
export default {
data() {
return {
msg: 'OK'
}
}
}
</script>
<style scoped>
h1 {
color: red;
}
</style>
- 创建
main.js入口文件：
// 导入 Vue 组件
import Vue from 'vue'
// 导入 App组件
import App from './components/App.vue'
// 创建一个 Vue 实例，使用 render 函数，渲染指定的组件
render: function (createElements) {
// createElements 是一个 方法，调用它，能够把 指定的 组件模板，渲染为 html 结构
return createElements(login)
// 注意：这里 return 的结果，会 替换页面中 el 指定的那个 容器
}
在使用webpack构建的Vue项目中使用模板对象？
- 在
webpack.config.js中添加resolve属性：
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
ES6中语法使用总结
使用
export default和export导出模块中的成员; 对应ES5中的module.exports和export使用
import ** from **和import '路径'还有import {a, b} from '模块标识'导入其他模块使用箭头函数：
(a, b)=> { return a-b; }
// 这是 Node 中向外暴露成员的形式：
// module.exports = {}
// 在 ES6中，也通过 规范的形式，规定了 ES6 中如何 导入 和 导出 模块
// ES6中导入模块，使用 import 模块名称 from '模块标识符' import '表示路径'
// 在 ES6 中，使用 export default 和 export 向外暴露成员：
var info = {
name: 'zs',
age: 20
}
export default info
/* export default {
address: '北京'
} */
// 注意： export default 向外暴露的成员，可以使用任意的变量来接收
// 注意： 在一个模块中，export default 只允许向外暴露1次
// 注意： 在一个模块中，可以同时使用 export default 和 export 向外暴露成员
export var title = '小星星'
export var content = '哈哈哈'
// 注意： 使用 export 向外暴露的成员，只能使用 { } 的形式来接收，这种形式，叫做 【按需导出】
// 注意： export 可以向外暴露多个成员， 同时，如果某些成员，我们在 import 的时候，不需要，则可以 不在 {} 中定义
// 注意： 使用 export 导出的成员，必须严格按照 导出时候的名称，来使用 {} 按需接收；
// 注意： 使用 export 导出的成员，如果 就想 换个 名称来接收，可以使用 as 来起别名；
// 在Node中 使用 var 名称 = require('模块标识符')
// module.exports 和 exports 来暴露成员
在vue组件页面中，集成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 }
]
});
- 将路由对象，挂载到 Vue 实例上:
var vm = new Vue({
el: '#app',
// render: c => { return c(App) }
render(c) {
return c(App);
},
router // 将路由对象，挂载到 Vue 实例上
});
- 改造App.vue组件，在 template 中，添加
router-link和router-view：
<router-link to="/login">登录</router-link>
<router-link to="/register">注册</router-link>
<router-view></router-view>
组件中的css作用域问题
抽离路由为单独的模块
使用 饿了么的 MintUI 组件
- 导入所有MintUI组件：
import MintUI from 'mint-ui'
- 导入样式表：
import 'mint-ui/lib/style.css'
- 在 vue 中使用 MintUI中的Button按钮和Toast弹框提示：
Vue.use(MintUI)
- 使用的例子：
<mt-button type="primary" size="large">primary</mt-button>
Mint-UI中按需导入的配置方式
使用 MUI 代码片段
注意： MUI 不同于 Mint-UI，MUI只是开发出来的一套好用的代码片段，里面提供了配套的样式、配套的HTML代码段，类似于 Bootstrap； 而 Mint-UI，是真正的组件库，是使用 Vue 技术封装出来的 成套的组件，可以无缝的和 VUE项目进行集成开发；
因此，从体验上来说， Mint-UI体验更好，因为这是别人帮我们开发好的现成的Vue组件；
从体验上来说， MUI和Bootstrap类似；
理论上，任何项目都可以使用 MUI 或 Bootstrap，但是，MInt-UI只适用于Vue项目；
注意： MUI 并不能使用 npm 去下载，需要自己手动从 github 上，下载现成的包，自己解压出来，然后手动拷贝到项目中使用；
- 导入 MUI 的样式表：
import '../lib/mui/css/mui.min.css'
- 在
webpack.config.js中添加新的loader规则：
{ test: /\.(png|jpg|gif|ttf)$/, use: 'url-loader' }
- 根据官方提供的文档和example，尝试使用相关的组件
App.vue 组件的基本设置
头部的固定导航栏使用
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 页签不同组件页面的切换
将 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'
});
使用 mt-swipe 轮播图组件
- 假数据：
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'
]
- 引入轮播图组件：
<!-- Mint-UI 轮播图组件 -->
<div class="home-swipe">
<mt-swipe :auto="4000">
<mt-swipe-item v-for="(item, i) in lunbo" :key="i">
<img :src="item" alt="">
</mt-swipe-item>
</mt-swipe>
</div>
</div>
在.vue组件中使用vue-resource获取数据
运行
cnpm i vue-resource -S安装模块导入 vue-resource 组件
import VueResource from 'vue-resource'
- 在vue中使用 vue-resource 组件
Vue.use(VueResource);
webpack.config.js
// 由于 webpack 是基于Node进行构建的，所有，webpack的配置文件中，任何合法的Node代码都是支持的
var path = require('path')
// 在内存中，根据指定的模板页面，生成一份内存中的首页，同时自动把打包好的bundle注入到页面底部
// 如果要配置插件，需要在导出的对象中，挂载一个 plugins 节点
var htmlWebpackPlugin = require('html-webpack-plugin')
// 当以命令行形式运行 webpack 或 webpack-dev-server 的时候，工具会发现，我们并没有提供 要打包 的文件的 入口 和 出口文件，此时，他会检查项目根目录中的配置文件，并读取这个文件，就拿到了导出的这个 配置对象，然后根据这个对象，进行打包构建
module.exports = {
entry: path.join(__dirname, './src/main.js'), // 入口文件
output: { // 指定输出选项
path: path.join(__dirname, './dist'), // 输出路径
filename: 'bundle.js' // 指定输出文件的名称
},
plugins: [ // 所有webpack 插件的配置节点
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'), // 指定模板文件路径
filename: 'index.html' // 设置生成的内存页面的名称
})
],
module: { // 配置所有第三方loader 模块的
rules: [ // 第三方模块的匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 处理 CSS 文件的 loader
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 处理 less 文件的 loader
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 处理 scss 文件的 loader
{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 处理 图片路径的 loader
// limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法
{ test: /\.vue$/, use: 'vue-loader' } // 处理 .vue 文件的 loader
]
},
resolve: {
alias: { // 修改 Vue 被导入时候的包的路径
// "vue$": "vue/dist/vue.js"
}
}
}
main.js
import Vue from 'vue'
// 1. 导入 vue-router 包
import VueRouter from 'vue-router'
// 2. 手动安装 VueRouter
Vue.use(VueRouter)
// 导入 app 组件
import app from './App.vue'
// 导入 自定义路由模块
import router from './router.js'
var vm = new Vue({
el: '#app',
render: c => c(app), // render 会把 el 指定的容器中，所有的内容都清空覆盖，所以 不要 把 路由的 router-view 和 router-link 直接写到 el 所控制的元素中
router // 4. 将路由对象挂载到 vm 上
})
// 注意： App 这个组件，是通过 VM 实例的 render 函数，渲染出来的， render 函数如果要渲染 组件， 渲染出来的组件，只能放到 el: '#app' 所指定的 元素中；
// Account 和 GoodsList 组件， 是通过 路由匹配监听到的，所以， 这两个组件，只能展示到 属于 路由的 <router-view></router-view> 中去；
router.js
import VueRouter from 'vue-router'
// 导入 Account 组件
import account from './main/Account.vue'
import goodslist from './main/GoodsList.vue'
// 导入Account的两个子组件
import login from './subcom/login.vue'
import register from './subcom/register.vue'
// 3. 创建路由对象
var router = new VueRouter({
routes: [
// account goodslist
{
path: '/account',
component: account,
children: [
{ path: 'login', component: login },
{ path: 'register', component: register }
]
},
{ path: '/goodslist', component: goodslist }
]
})
// 把路由对象暴露出去
export default router
