Vue工程化
文件结构：
|-dist
|---bundle.js 合并后的js文件
|---index.html 处理后的html文件
|-src
|---component 存有vue组件的文件夹
|-----App.vue 主vue组件，直接和html关联
|-----xxx.vue vue组件，可以通过组件注册或路由将其引入到页面中
|---index.html 页面，作为所有vue组件的容器
|---main.js 主js，在webpack处理的时候的入口文件，里面import了其他的模块或包
|-package.json 存有项目的依赖信息
|-webpack.config.js webpack用于将vue项目转换成上线的格式
vue组件的构造
1、index.html
用于存放主vue的容器，定义一个id即可。
eg:
<div id="app">
</div>
2、main.js
主js入口文件，用于定义vue实例，引入主vue文件。
eg:
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: '#box',
render: l => l(App)
})
tips:在这里，render: h=>h(App)相当于
render: function (arg){
arg(App)
}
表明将App.vue的内容渲染到页面的#app中；
3、App.vue
主vue文件，在这里定义组件并注册组件。
直接以组件名作为标签名，来提示组件加入的位置。
eg：
<template>
<div>
<myhome></myhome>
</div>
</template>
<style lang="less" scoped>
</style>
<script>
import Home from "./Home.vue"
export default{
components:{
myhome:Home
}
}
</script>
tips：template里写html页面标签，即这个组件的内容，
style里写样式，若格式为less则加上属性lang="less"，限定样式只在本文件生效，加scoped；
script中先import引入组件，export default在这里相当于new Vue，在components中定义组件名和组件；
要在页面中指定位置显示引入的组件，以这个组件名作为标签名，写入该标签即可；
tips：创建多个vue文件，在App.vue中引用它们，输出到页面中。
例如这里的Home.vue。
vue路由的构造
1、配置路由在main.js中进行，引入路由组件在App.vue中进行；
tips：可以理解为，App.vue相当于index.html，通过这个vue作为入口引入其他的组件。
2、main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
//引入vue组件
import App from './App.vue'
import Detail from './components/Detail.vue'
import Cart from './components/Cart.vue'
// 也可以引用一些样式
import 'animate.css'
// 1.注册路由
Vue.use(VueRouter)
// 2.配置路由规则
const router = new VueRouter({
// 数组里一个对象就是一个规则,
// router-view 当url中锚点值是#/cart时， Cart组件中的标签会显示到router-view标签
routes:[
{name:'cart',path:'/cart', component:Cart},
{name:'detail',path:'/detail/:goodsid',component:Detail}
// 动态路由的写法，在锚点后加:变量名，this.$route.params.goodsid 可以获取到goodsid对应的值。
]
})
// 3.要在new Vue时加上router属性，值为上面new出的路由规则对象
new Vue({
el: '#app',
router,
render:h=>h(App)
})
tips:routes中定义组件，component后的组件不加引号；
若报错，在routes中的最后一个元素后加逗号；
eg：
routes:[
{path:'/pageone',component:page_1},
{path:'/pagetwo',component:page_2},
]
3、App.vue
在这里加入路由标签和响应的view
<router-link to="/home">点击这里切换到home</router-link>
<router-link to="/cart">点击这里切换到cart</router-link>
<router-view></router-view>
tips:若需要动态路由，在main.js中定义规则的时候，
path:"/xx/:id"，通过this.$route.params.id获取到该值
tips:link中设置切换组件的入口，view的位置即为组件添加到页面中的位置
Vue属性
1、data：数据都放在data中
eg:
new Vue({
data:{
//在new Vue()中的写法
}
})
export default{
data:function(){
return {
//在组件export default中的写法
}
}
}
2、methods：方法。
eg:
methods:{
addxx:()=>{
},
delxx:()=>{
}
}
3、component：页面组件，
格式为 ‘组件名：组件’，在页面中调用直接用组件名作为标签。
eg:
<template>
<div>
<myhome></myhome>
</div>
</template>
<script>
import Home from "./Home.vue"
export default{
components:{
myhome:Home
}
}
</script>
4、mounted：在DOM元素加载之后执行，可以在其内部写DOM操作；
tips：在前面import jquery from "jQuery"，可以用$在其内部使用jquery。
eg:
mounted:function(){
//在这里操作DOM
}
5、created：当组件自身的实例对象被创建的时候触发该事件；
created在mounted之前执行。
在这里我们可以发送ajax请求数据，将其输出到data中。
eg:
created:function(){
axios.get('./url',)
.then(()=>{
})
}
6、updated： updated在data发生变化渲染更新视图的时候触发。
eg:
updated:function(){
}
7、computed：当页面的data数据发生了改变的时候就会调用该函
eg：
computed:{
age: function() {
return this.childrens.age +10;
}
}
tips:当使用了vuex的时候，computed可以获取状态的更新；
eg:
const store = new Vuex.Store({
state:{
count: 0
}
})
const app = new Vue({
store,
computed:function(){
count:function(){
return this.$store.state.count
}
}
})
当state中的数据改变的时候，都会重新计算页面中的数据，computed会被触发，更新页面；
总结
1、vue结构，
index.html
为主html页面，里面只需要定义一个元素id即可。
App.vue，
App.vue中的html内容会直接插入到index.html中，
App.vue中引入其他组件，直接以该组件名作为标签，写在template中。
exports default{
data:function(){
return{
a:xx,
b:yy
}
}
}
main.js
js入口文件，在这里import vue from "Vue"，引入各种依赖；
同时，在这里创建Vue实例化对象，即new Vue()
注册路由在这里进行，路由的配置信息设置好之后，传入路由，即
new Vue({
data:{},
methods:{},
router:new Router({
routes:[
{path:"/home",component:Home},
{path:"/cart",component:Cart}
]
})
})
在定义路由之前，需要引入对应的组件，
import Home from "./Home.vue";
import Cart from "./Cart.vue";
Cart.vue
组件，可以在这里写自己的组件信息，
template里写html，style中写css，script中写组件配置；
Home.vue
同上。
tips：在vue后缀名的文件中export default{}，可以视作相当于new Vue({});
唯一区别是其data要写成函数返回值的形式；
eg:
new Vue({
data:{
a:xx,
b:yy //new Vue的形式data直接是一个对象
}
})
export default{
data:function(){
return {
a:xx,
b:yy //export default的形式，data写成函数形式，return一个对象，对象里写data的值；
}
}
}
2、webpack
vue的工程化开发，需要配合webpack使用，webpack不一定要自己写。
可以使用vue-cli来进行自动生成vue的结构文件。
方法：
npm i -g vue-cli 安装vue-cli模块
vue init webpack my-project 利用webpack创建一个项目文件，文件名为my-project.
cd my-project 进入my-project文件夹
npm install 安装依赖，npm会根据package.json中包的信息来装环境，不用管。
npm run dev 运行服务，启动服务。在localhost:8086端口可以打开当前的index.html页面。
tips：执行完之后，就可以修改App.vue和main.js，以及创建vue文件这些操作，来进行开发页面了。
tips：要开发vue文件，需要webpack进行配合，
vue-cli可以提供一个webpack的压缩环境，不需要自己写webpack的文件了，拿来就能用，仅此而已。
3、axios
（1）、vue本身不支持ajax请求，需要用axios包来配合使用。
tips：Vue 原本有一个官方推荐的 ajax 插件 vue-resource，
但是自从 Vue 更新到 2.0 之后，官方就不再更新 vue-resource
因此目前主流的 Vue 项目，ajax 请求用 axios 来完成 ，而大型项目都会使用 Vuex 来管理数据；
（2）、安装
npm install axios -S
（3）、改写原型链（写在main.js中）
import axios from 'axios'
Vue.prototype.$ajax = axios
此时，就可以直接在methods的function中直接用$ajax来使用axios了
eg：
methods: {
submitForm () {
this.$ajax({
method: 'post',
url: '/user',
data: {
name: 'wise',
info: 'wrong'
}
})
}
4、npm项目运行
npm run dev 编译环境，开启服务，输入localhost:8086
npm run build 线上架构，开启后将代码放到服务器中即可运行
tips：npm run build 之后代码会被压缩，放到了dist文件夹里，但是不能用file协议打开，而要用服务器环境才能打开。
解决办法：
（1）、到项目目录下的 config 文件夹里的 index.js 文件中，找到 build 对象，
（2）、将 assetsPublicPath 中的 “/” ，改为 “./” ，就在前面加个点就可以了，
（3）、并在 build\build.js 将提示file协议不能打开的两句提示信息删掉或注释掉，
（4）、再打包直接用浏览器直接运行就好了。
需要的包
package.json
{
"name": "text_276_wpk_basic",
"version": "1.0.0",
"description": "",
"main": "webpack.config.js",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --port 8086",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"async-validator": "^1.6.8",
"babel-core": "^6.24.0",
"babel-loader": "^6.4.1",
"babel-plugin-component": "^0.9.1",
"babel-preset-es2015": "^6.24.0",
"cross-env": "^4.0.0",
"css-loader": "^0.28.0",
"file-loader": "^0.11.1",
"html-webpack-plugin": "^2.28.0",
"jquery": "^3.2.1",
"less": "^2.7.2",
"less-loader": "^4.0.3",
"style-loader": "^0.16.1",
"vue-core-image-upload": "^2.0.10",
"vue-loader": "^11.3.4",
"vue-quill-editor": "^2.0.4",
"vue-router": "^2.3.1",
"vue-template-compiler": "^2.2.6",
"webpack": "^2.3.2",
"webpack-dev-server": "^2.4.2"
},
"dependencies": {
"element-ui": "^1.2.7",
"vue": "^2.2.6",
"vue-echarts-v3": "^1.0.3"
}
}
webpack.config.js
const path = require("path");
const Hwp = require("html-webpack-plugin");
var obj = {
/**
* entry用于指定需要处理的js入口文件
* 对于vue，这里处理创建vue对象的main.js
*/
entry: {
app: "./src/main.js"
},
/**
* output用于指定输出文件的路径和打包之后的js名称
*/
output: {
path: path.join(__dirname, "./dist"),
// publicPath: '/dist/',
filename: "bundle.js"
},
/**
* module指定less文件和vue文件的处理工具，
* ————loader
* vue用vue-loader，
* less用vue-style-loader、style-loader、css-loader、less-loader
*/
module: {
loaders: [
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.less$/,
loader: 'vue-style-loader!style-loader!css-loader!less-loader'
},
{
test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
loader: 'file-loader'
},
{
test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
loader: 'file-loader',
query: {
name: '[name].[ext]?[hash]'
}
}]
},
// devServer: {
// historyApiFallback: true,
// noInfo: true
// },
// devtool: '#eval-source-map',
/**
* plugins里面写一个new HtmlWebpackPlugin，
* 里面的template指定了需要插入script标签的html文件
*/
plugins: [
new Hwp({
template: './src/index.html'
})
]
}
// if (process.env.NODE_ENV === 'production') {
// module.exports.devtool = '#source-map'
// // http://vue-loader.vuejs.org/en/workflow/production.html
// module.exports.plugins = (module.exports.plugins || []).concat([
// new webpack.DefinePlugin({
// 'process.env': {
// NODE_ENV: '"production"'
// }
// }),
// new webpack.optimize.UglifyJsPlugin({
// compress: {
// warnings: false
// }
// })
// ])
// }
module.exports = obj
扫一扫
4497
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
