VUE-learn-stack

优质

小牛编辑

128浏览

2023-12-01

环境

Nodejs 10+
vue npm install vue
vue-cli npm install -g vue-cli
yarn npm install -g yarn
UI:ant design vue

vscode插件

Ant Design Vue helper
Chinese (Simplified) Language Pack for Visual Studio Code
Git Easy
JavaScript (ES6) code snippets
koroFileHeader
Path Intellisense
Vetur Vue多功能集成插件

vscode 前端常用插件推荐

chrome 调试

vue-devtools

基于 ant design vue pro

拉取代码：

git clone --depth=1 https://github.com/sendya/ant-design-pro-vue.git my-project

配置淘宝镜像：

yarn config set registry https://registry.npm.taobao.org

依赖包：

yarn install

运行：

yarn run serve

技术点

Vue 基础

模板语法： v-cloak
数据绑定
事件绑定
1. 事件修饰符
属性绑定
样式绑定
指令
计算属性
侦听器
过滤器
传值：
1. 父子传值：props
2. 非父子：事件中心 var eventHub=new Vue() eventHub.$on('add-todo',addTodo) eventHub.$off('add-todo')
组件插槽：
1. 具名插槽
2. 作用域插槽：父组件对子组件内容进行加工处理slot-scope废弃->v-slot

前端交互

Promise
fetch
axios
async await

Vue 路由 Vue-router

Vue Router ,Vue 官方路由管理器。
数据获取
滚动行为
路由懒加载

HTML5历史模式或hash模式
1. html <router-link to="/foo">Go to Foo</router-link> ; <router-view></router-view>
2. {path:'/user',component:User}
3. 重定向：{path:'/',redirect:'/user'}
嵌套路由 {path:'',component:Register,children:[{...},{...}]}
动态路由匹配:
1. {path:'/user/:id',component:User}
2. $route.params.id
路由参数:
1. 字符串：{path:'/user/:id',component:User,props:true} ; props:['id']
2. 对象(静态)：{path:'/user/:id',component:User,props:{name:'xx',age:20}} propos['id','name','age']
3. 函数：props:route=>{ {id:route.params.id,name:'xx',age:20} }
命名路由：{path:'/user/:id',component:User,name:'user'} ; <router-link :to="{name：'user',params:{id：123}}">User</router-link>
编程式路由：
1. this.$router.push('hash地址')
2. this.$router.go(n)
3. router.push({name:'/user',params:{userId:123}})
4. router.push({name:'/register',query:{name:123}}) ->/register?name=123

Vue 单文件组件

组成结构：

template
script
style

Vue 脚手架

vue cli

npm install -g @vue/cli
vue --version

vite:针对Vue单页面组件的无打包开发服务器，可以直接在浏览器运行请求的vue文件

自定义配置

vue.config.js

module.exports = {
   "devServer":{
      "port":8888,
      "open":true
   }
}

Element-UI

npm i element-ui -S
导入 Element-UI 相关资源
vue-cli-plugin-element

Webpack

安装：

npm install webpack webpack-cli -D

自动打包

npm install webpack-dev-server -D

生成预览页面

npm install html-webpack-plugin -D

打包处理js中的高级语法：babel.config.js

module.exports={
   presets:['@babel/env']
}
}

配置：webpack.config.js

const path= require('path');

const HtmlWebpackPlugin = require('html-webpack-plugin');
const htmlPlugin= new HtmlWebpackPlugin({
   template:'./src/index.html',
   filename:'index.html'
});

const VueLoaderPlugin=require('vue-loader/lib/plugin');

module.exports = {
    mode:'development', //production development
    entry:'./src/index.js',
    output:{
        path: path.resolve(__dirname, "dist"),
        filename:'bundle.js'
    },
    module:{
      rules:[
       // npm i style-loader css-loader -D
       {test:/\.css$/,use:['style-loader','css-loader']},
       // npm i less-loader less -D
       {test:/\.less$/,use['style-loader','css-loader','less-loader']},
       // npm i sass-loader node-sass -D
       {test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
       // npm i url-loader file-loader -D
       {test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,use:'url-loader?limit=10240'},
       // npm i babel-loader @babel/core @babel/runtime @babel/preset-env -D
       {test:/\.js$/,use:'babel-loader',exclude:/node_modules/},
       // npm i vue-loader vue-template-compiler -D
       {test:/\.vue$/,loader:'vue-loader'}
      ]
    },
    plugins:[
       htmlPlugin,
       new VueLoaderPlugin()
    ]
}

命令： package.json

"script":{
    "build":"webpack -p",
    "dev":"webpack-dev-server --open"
}