-
01.vue语法基本使用
-
02.webpack 使用
-
04.vue-cms dotnetcore 2.1 api 后台
vue-cms 是跟着B站上传智播客自学的一个小项目 作为一个 .NET 后端只想入坑下vue 线上地址
npm install
npm run dev
webpack基本使用：
npm init -y --如果是中文 直接 npm init 项目名称
webpack .\src\main.js .\dit\bundle.js --webpack ./src/main.js -o ./dist/bundle.js --mode development
cnpm i webpack -D cnpm i -D webpack-cli
cnpm i webpack-dev-server -D在配置文件里做相应配置代码如下：
//导入path 模块
const path = require('path');
module.export={
entry:path.join(__dirname,'./src/main.js'),//入口文件
output:{//指定输出项
path:path.join(__dirname,'./dist');//输出路径
filename:'bundle.js';//指定输出文件名称
}
}在 package.json 文件找到 script 节点中添加脚本： "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot",
var htmlWebpackPlugin = require('html-webpack-plugin');
plugins:{
new htmlWebpackPlugin({
template:path.join(__dirname,'./src/index.html'),//指定模板文件路径
filename:'index.html'//指定生成内存页面名称
})
}cnpm i style-loader -D
cnpm i css-loader -D
--简写 cnpm i style-loader css-loader -D
cnpm i less -D
cnpm i less-loader -D
--简写 cnpm i less-loader less -D
cnpm i node-sass -D
cnpm i sass-loader -D
--简写 cnpm i sass-loader node-sass -D
module: {//用于配置所有地方三方模块加载器
rules: [//所有第三方模块 匹配规则
//错误配置 { test: /\.css$/, use: ['style-loader', 'css-loder'] }//配置处理 .css文件的第三方loader
{ test: /\.css$/, loader: "style-loader!css-loader" },//配置处理 .css文件的第三方loader
{ test: /\.less$/, loader: "style-loader!css-loader!less-loader" },//配置处理 .less文件的第三方loader
{ test: /\.scss$/, loader: "style-loader!css-loader!sass-loader" }//配置处理 .scss文件的第三方loader
],
}cnpm i url-loader file-loader -D
配置处理图片规则：
{test:/\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=119319&name[hash:8]=[name].[ext]'}
limit >= 图片的大小(kb*1024=字节) 图片会转成base64位编码。
limit < 图片的大小(kb*1024=字节) 图片不会转成base64位编码。
配置图片显示名称 name[hash:8]=[name].[ext]
[hash:8] hash值+图片默认名称{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader
cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
cnpm i babel-preset-env bable-preset-stage-0 -D
在webpack.config.js添加配置项如下：
{tests:/\.js$/,use:'babel-loader',exclude:/node_modules/} --排除//exclude:/node_modules/
在根目录添加 .bablerc 配置文件（json格式）配置项如下:
{
"presets":["env","stage-0"],//语法映射
"plugins":["transform-runtime"]//插件
}cnpm i vue -S
注意:此处安装vue后会引起 webpack-dev-server 的不兼容,此时只与需要将
node_modules文件全部删除后 执行npm install后即可cnpm i vue-loader vue-template-compiler -D
{test:/\.vue$/,use:'vue-loader'}
导入插件：
const vueLoaderPlugin = require('vue-loader/lib/plugin')
new vueLoaderPlugin()npm install vue-router -S
cnpm i vue-resource -S//安装插件命令：
cnpm i moment -S
//导入插件
improt moment from 'moment';
//定义全局过滤器
Vue.filter('dateFormat',function(dateStr,parameters = 'YYYY-MM-DD HH:mm:ss'){
debugger
return moment(dateStr,parameters);
});调用方式 :
<span>发表时间:{{item.CreateTime | dateFormat}}</span>1.装包
cnpm install babel-plugin-transform-remove-strict-mode -D
//在 .babelrc 中配置如下:
"plugins": [
"transform-remove-strict-mode" //配置移除严格模式
]cnpm i vue-preview -S在 package.json中
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot --host 192.168.1.219"
新增 --host 192.168.1.219"配置ip地址
https://router.vuejs.org/zh/guide/essentials/navigation.html
- this.$router 实际上 就是全局 路由对象 任何页面 都可以 调用 push(), go()等方法
- this.$route 表示当前正在用于跳转的路由器对象，可以调用其name、path、query、params等属性
cnpm install vuex -S- 使用
mutations来操作state中的数据 - 使用
this.$store.commit("increment")调用mutations 中定义的方法