一、在webpack中使用vue
1.安装 vue命令
npm i vue -S
2.在webpack中使用Vue
- 方法1
在main.js中直接导入vue.js中的路径
import Vue from ‘…/node_modules/vue/dist/vue.js’ - 方法2
main.js中通常写法:
import Vue from ‘vue’
在webpack.config.js中添加一个resolve属性
resolve: {
alias: {
// 修改 Vue被导入时候包的路径
"vue$": "vue/dist/vue.js"
}
},
- 包的查规则:
1.找项目中根路径有没有 node_modules的文件夹
2.在 node_modules中根据包名找对应的vue文件夹
3.在 vue 文件夹中,找到一个叫做 package.json的包配置文件
4.在 package.json 文件夹中 查找一个main属性 【main属性指定了这个包在被加载时候的入口文件】
第三种:使用vue的组件 推荐
总结:webpack 中如何使用 vue
1.安装 vue的包: cnpm i vue -S
2. 由于在 webpack中推荐使用 .vue这个组件模板文件定义组件,所以需要安装能解析
这种文件的loader cnpm i vue-loader vue-template-complier -D
3.在 main.js 中导入 vue模块。 import Vue from ‘vue’
4.定义一个 .vue 结尾的组件,其中组件有三部分速成 template script style
5.使用 import login from ‘./login.vue’ 这个组件
6.创建一个vm实例 var vm = new Vue({el:"#app",data:{msg:‘123’},render: c=> c(login))
7.在页面中创建一个 id 为 app的 div元素,作为我们 vm 实例要控制的区域
注意:Vue-loader为15版本的时候需要配合着插件使用:
方法:
https://blog.csdn.net/leeue/article/details/94397476
二、export default 和 export使用方式
在 ES6 中使用 export default 和 export向外暴露成员:
//在 ES6中导入模块,使用: import 模块名称 from ‘模块标识符’ import ‘表示路径’
- 1.export default 使用方式:
语法格式:
test.js:
var info = {
name: 'zs',
age: '20'
}
export default info // 使用 export default 向外暴露成员
使用方式: main.js中
import m1 from '../test.js'
使用export default 向外暴露成员注意
1.export default 向外暴露的成员 可以使用任意的变量来接受
2.在一个模块中,export default 只允许向外暴露1次
3.在一个模块中也可使用 export 向外暴露成员变量
- 2 使用export来想外暴露成员
语法: test.js中
export var title = '第二个export'
export var content = {name:'第三个export',age:20}
main.js中引用:
import m1, {title,content}from '../test.js'
console.log(m1)
console.log(title)
console.log(content.name)
使用 export向外暴露成员注意点
1.使用export向外暴露成员变量,只能用户 { 暴露名 } 的形式来接受,这种形式叫做 [按需导出]
2.export可以向外暴露多个成员,同时如果某些成员我们在import的时候,不需要则可以不在 {} 中定义
3. 使用 export 导出的成员,必须严格的按照导出时候的名称来使用 {} 按需接受
4. 注意: 使用 export导出成员,如果就想换个名称来接受,可以使用 as 来起别名
四、webpack中使用vue-router
1.使用命令安装 vue-router
npm i vue-router
2.导入VueRouter
import VueRouter from 'vue-router'
3.手动安装 VueRouter
Vue.use(VueRouter)
4.创建路由
var router = new VueRouter({
routes: [
{path: '/account',component: account},
{path: '/goodsList',component: goodsList}
]
})
var vm = new Vue({
el: "#app",
render: c => c(app),// render 会把 el指定的容器中,
//所有的内容都清空覆盖,所以不要把路由的router-view 和router-link 所以不要把
//路由的 router-view 和 router-link 直接写到 el 所控制的元素中
// el 就是 createElements
router, //4.将路由对象挂载到 vm 上
})
注意: App这个组件是通过 VM实例的render函数渲染出来的, render函数如果要渲染组件,渲染出来的组件只能放到el: ‘#app’ 所指定的元素中。
Account 和 GoodsList 组件是通过路由匹配监听到的,所以,这两个组件只能展示到属于路由的
<router-view></router-view>
中去
五、webpack中使用子路由 和样式设置
使用子路由跟上面的方式是差不多的,只不过在创建路由对象的时候
添加一个 children
属性
// 3.创建路由对象
var router = new VueRouter({
routes: [
{
path: '/account',
component: account,
children: [
{path: 'login', component:login},
{path: 'register',component: register}
]
},
{path: '/goodsList',component: goodsList}
]
})
2.组件中样式设置 scoped
表示这个样式只在当前这个这个组件中生效
3.组件中使用 scss
<style lang="scss" scoped>
/* 普通的 style 标签只支持普通的样式,如果想要启用 scss 或者 */
body{
div{
font-style: italic;
}
}
</style>
只要我们组件中有style属性,都推荐开启scoped属性
案例中需要安装的包和加载器
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.6.1",
"babel-preset-stage-0": "^6.24.1",
"css-loader": "^0.28.7",
"file-loader": "^1.1.5",
"html-webpack-plugin": "^2.30.1",
"less": "^2.7.3",
"less-loader": "^4.0.5",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.0",
"url-loader": "^0.6.2",
"vue-loader": "^13.3.0",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.8.1",