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
领取专属 10元无门槛券
私享最新 技术干货