Vue学习Day02

Vue高阶

Render函数：会替换 el 指定的容器

varvm=newVue({

el:"#app",

render:c=>c(login)

})

Git发布

git init

git commit

git status

发布：

git add .文件

git commit -m 提交

git push 推送

Vue-router 路由

后端路由： 对于普通网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；

前端路由：对于单页面应用程序来说，主要通过URL中的hash（#号），来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不包含hash相关的内容，所以，单页面程序中的页面跳转主要用hash来实现

在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）

路由创建方式如下：

varlogin={

template:`登录组件`,

created(){

console.log(this.$route.query.id)// 这里可以拿到路由传递的参数

}

}

varrouterObj=newVueRouter({

routes: [

{path:'/',rediretct:'/login'},

{path:'/login',component:login}

]

})

varvm=newVue({

el:"#app",

data: {},

router:routerObj

})

每个路由规则都是一个对象，这个对象有两个必须的属性：

path表示监听的路由链接地址

component，表示如果路由是前面匹配到的path，则展示对应component的组件

登录

varrouter=newVueRouter({

routes: [

{

path:'/login/:id',// 对应URL地址： localhost/login/12，

// 可以通过this.$route.params接收

component:login

},

{

path:'/register',

component:register,

children: [

path:'account',

component:account

]

}

]

})

Vue-vuex 状态管理

conststore=newVuex.Store({

state: {// 相当于data

count:

},

mutations: {// 相当于methods

increment(state){// mutations 的函数参数列表中，只有两个参数，其中参数1 是state状态，参数2是通过commit 提交过来的参数

state.count++

}

// 如果组件中想要调用mutations中的方法，只能使用 this.$store.commit('方法名')

},

getters: {

// 只负责对外提供数据，不负责修改数据

}

})

webpack

main.js

main.js 是项目的JS入口文件

import$from'jquery'// ES6中导入模块的方式

webpack编译执行的命令行：

webpack指定编译文件-o指定输出文件

webpack.\src\main.js-o.\dist\bundle.js

通过webpack前端构建工具，把 main.js 文件生成 bundle.js 文件，

使用 import 语法，导入css样式表

import'./css/index.css'

如果需要打包处理 css 文件，需要安装

npm i style-loader css-loader -D

npm i less -D

npm i less-loader -D

npm i node-sass -D

npm i sass-loader -D

npm i url-loader file-loader -D

如果要通过路径的形式，去引入node_modules 中相关的文件，可以直接省略路径前面的node_modules这一层目录，直接写包的名称，然后跟上具体的文件路径。

配置文件可以配置打包执行的命令，从而简化webpack编译执行

constpath=require('path')

constwebpack=require('webpack')

consthtmlWebpackPlugin=require('html-webpack-plugin')

module.exports={

entry:path.join(__dirname,'./src/main.js')

output: {

path:path.join(__dirname,'./dist'),

filename:'bundle.js'

},

devServer: {

open:true,

port:3000,

contentBase:'src',

hot:true

},

plugins: [

newwebpack.HotModuleReplacementPlugin();

newwebpack.htmlWebpackPlugin({

template:path.join(__dirname,'./src/index.html'),// 指定 模板页面

filename:'index.html'// 指定生成页面的名称

});

],

module: {// 配置所有第三方模块的加载器

rules: [// 第三方模块的匹配规则，use属性里的元素都可以传参，用以定义规则

{test:/\.css$/,use: ['style-loader','css-loader'] }，

{test:/\.less$/,use: ['style-loader','css-loader','less-loader'] },

{test:/\.scss$/,use: ['style-loader','css-loader','sass-loader'] },

{test:/\.(jpg|png|gif|bmp|jpeg)$/,use: ['url-loader?limit=1024&name=[hash:8]-[name].[ext]'] },// 处理图片路径

{test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},// 处理字体文件

]

},

resolve: {

alias: {

"vue$":"vue/dist/vue.js"

}

}

}

webpack-dev-server

可以使用 webpack-dev-server 这个工具， 实现自动打包编译的功能

运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖

安装完毕后，需要在package.json中配置webpack-dev-server

package.json

"script": {

"dev":"webpack-dev-server --open --port 3000 --contentBase src --hot"

}

index.html

在内存中存放 html 文件

npm i html-webpack-plugin