笔记随笔1(webpack,vue-router)

Posted 2021-06-01 紫色烟云

笔记随笔1

• props ; $emit ;
• :value= XX ; Vue event.target.value( ) ;
• slot
• name slot 具名插槽
• <template slot-scope=“child_data”>
• module.eports ; require()
• export ; import ;
• arguments
• webpack前端模块化打包工具(依赖node环境)
• “node -v”
• “npm install webpack@3.6.0 -g”
• 过渡到.vue组件化开发：el => template 替换 el => conponents 替换 template("<app/>") => import app from “./views/app.js” => JS文件内 exports default {vue实例} => .vue组件文件替换JS文件(vue实例的name属性为此组件的名称)<template><script><style> => 引入其它组件: 1,引入：import XX_cpn from “./views/XX.vue” 2,注册：conponents{XX_cpn} 3,使用：<XX_cpn></XX_cpn>
• Vue CLI (vue command-line interface)
• “npm install -g @vue/cli” 全局安装脚手架3
• “vue init webpack 项目名称” cli2初始化生成项目
• “vue create 项目名称” cli3 初始化生成项目
• Project name (项目名称)
• Project description (项目描述)
• Author (项目作者)
• Runtime +Compiler / Runtime-only (渲染模式，Runtime-only模式内在更小,效率更高)
• Install vue-router?(Y/n) (是否安装路由,一般为Y)
• Use ESLint to lint your code?(Y/n) (是否安装ESLint规范你的代码,一般为n)
• Set up unit tests?(Y/n)(安装单元测试,一般为n)
• Setup e2e tests with Nightwatch?(Y/n)(安装端到端测试，一般为n)
• Should we run “npm install” for you after the project has been created?(recommended)(Yes,use NPM / Yes,use Yarn / No,I will handle that myself)(通过什么包管理工具来下载第三方包，一般为"Yes,use NPM")
• “npm install”安装项目所需的所有第三方包
• "npm run dev"cli2运行项目至本地服务器
• "npm run build"打包项目所有代码至dist(服务器布置文件)
• vue-router
• SPA(单页面富应用,现代前端开发模式,一个index.html+一个style.css + 一个main.js,组件化开发+前端路由+异步任务实现SPA)
• location.hash=“home” 或 history.pushState({},"",“home”) 或 <router-link to="/home">首页</router-link> 更改本地路由且不发送请求
• history.back() 或 history.go(-1)
• history.replaceState({},"",“home”) 替换当前本地路由且不发送请求
• “npm install vue-router --save” 安装并保存路由第三方包
• 前端路由: 导入vue-router第三方模块:import VueRouter from “vue-router” => 添加中间件:Vue.use(VueRouter) => 创建路由实例:const router = new VueRouter(routes:routes,mode:“history”);，并且传入路由配置: const routers = [{ path:"./home", component:Home},{path:"./about",component:About }] => 在Vue实例(main.js文件)上挂载创建的路由实例:1,import router from “./router/index.js” 2,new Vue({ router:router });
• <router-link to="/home" tag=“button” replace > ,<router-view>
• redirect:"/home" 重定向
• linkActive-class:“active”
• 组件内更改本地路由:this.$router.push("/home") ;this.$router.replace("/home");
• 动态路由:1,添加路由映射关系: const routes ={path:"/user/:use_id",component:User} => 2,更改本地路由<router-link :to="’/user/’+user_id" >用户<router-link> 或 组件vue实例内this.$router.push("/user/"+this.user_id) =>3,组件内拿到路由表(this.$router)中当前活跃的动态路由(this.$route)的参数:this.$route.params.user_id
• 路由懒加载（分割庞大的JS代码，提升首次请求速度）:router/index.js文件内,原先的:import Home from “…/components/home.vue” 被替换为 const Home = ()=>import("…/components/home.vue") 即可实现dist中的文件分割(路由懒加载)
• 子路由: const routes =[{path:"/home",component:Home, children:[{path:“news”,component: HomeNews},{path:“message”,component:HomeMessage}]}] => 父组件内更改本地路由：<router-link to="/home/news">到子路由新闻组件</router-link> <router-link to ="/home/message">到子路由消息组件</router-link> <router-view></router-view>
• 路由传参:<router-link :to="{path:"/user",query:{user_id:001}}"></router-link>